WebKit Bugzilla
Attachment 358197 Details for
Bug 193088
: REGRESSION (Web Animations): CSS Transition sometimes jumps back and forth between initial position and current position
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
testcase
transition-transform.html (text/html), 631 bytes, created by
Xidorn Quan
on 2019-01-02 13:05:41 PST
(
hide
)
Description:
testcase
Filename:
MIME Type:
Creator:
Xidorn Quan
Created:
2019-01-02 13:05:41 PST
Size:
631 bytes
patch
obsolete
><!DOCTYPE html> ><style> >#container { > position: fixed; > top: 0; > left: 0; > transform-origin: 0% 0%; > transition: transform 250ms; > background-image: linear-gradient(to bottom, cyan, blue); >} ></style> ><div id="container"></div> ><script> > let timeout; > let x, y; > window.addEventListener('mousemove', evt => { > x = evt.clientX; > y = evt.clientY; > if (!timeout) { > timeout = setTimeout(updateStyle, 0); > } > }); > function updateStyle() { > const transform = `translate(${x}px, ${y}px)`; > container.style = `width: 100px; height: 100px; transform: ${transform};`; > timeout = undefined; > } ></script>
<!DOCTYPE html> <style> #container { position: fixed; top: 0; left: 0; transform-origin: 0% 0%; transition: transform 250ms; background-image: linear-gradient(to bottom, cyan, blue); } </style> <div id="container"></div> <script> let timeout; let x, y; window.addEventListener('mousemove', evt => { x = evt.clientX; y = evt.clientY; if (!timeout) { timeout = setTimeout(updateStyle, 0); } }); function updateStyle() { const transform = `translate(${x}px, ${y}px)`; container.style = `width: 100px; height: 100px; transform: ${transform};`; timeout = undefined; } </script>
View Attachment As Raw
Actions:
View
Attachments on
bug 193088
: 358197 |
382075