Bug 181755 - [iOS] [WPE] Wrong animation speed when using CSS transform, rendering glitch
Summary: [iOS] [WPE] Wrong animation speed when using CSS transform, rendering glitch
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Animations (show other bugs)
Version: Other
Hardware: iPhone / iPad iOS 11
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2018-01-17 11:32 PST by Steffen Deusch
Modified: 2023-05-11 00:15 PDT (History)
3 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Steffen Deusch 2018-01-17 11:32:02 PST
Hello everyone,
while testing CSS transforms concerning https://bugs.webkit.org/show_bug.cgi?id=181709, I noticed another issue that you can see here:
https://s3.eu-central-1.amazonaws.com/steffend/public/webkitbug/somethingswrong.mp4
Basically, the animation plays too slowly, but the Web Inspector shows the position where the elements should be.
When reloading, the animation speed seems kind of random: https://s3.eu-central-1.amazonaws.com/steffend/public/webkitbug/speed.mp4

Page for reproduction: https://s3.eu-central-1.amazonaws.com/steffend/public/webkitbug/scrolling.html

I noticed this issue on iOS 11.2.2 and WPE master (only sometimes and when using an iframe: https://s3.eu-central-1.amazonaws.com/steffend/public/webkitbug/scrollframe.html), possibly affecting other platforms too. I couldn't reproduce it on macOS (Safari).
WPE commit 959d9b1d2555da0ce65bd0198bc509dd08e9f910 (https://github.com/WebPlatformForEmbedded/WPEWebKit).

Thanks for any help,
Steffen Deusch
Comment 1 Simon Fraser (smfr) 2019-01-19 10:43:59 PST
Does this still reproduce in iOS 12?
Comment 2 Antoine Quint 2023-05-11 00:13:26 PDT
Huh, Safari 16 on macOS does indeed animate rows slower than Firefox and Chrome which animate at the same speed.
Comment 3 Antoine Quint 2023-05-11 00:15:14 PDT
@keyframes scrolllistTicker {
    0% { transform: translate3d(0, 0%, 0) }
    100% { transform: translate3d(0, -50%, 0) }
}

Presumably we don't compute 50% in the same way and this causes the different speed visibly.