Bug 188558 - CSS transition with CSS transform exhibits unintended jitter
Summary: CSS transition with CSS transform exhibits unintended jitter
Status: RESOLVED CONFIGURATION CHANGED
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: Safari 11
Hardware: iPhone / iPad iOS 11
: P2 Normal
Assignee: Nobody
URL:
Keywords:
Depends on:
Blocks:
 
Reported: 2018-08-14 09:52 PDT by Eugene Wen
Modified: 2018-08-16 01:42 PDT (History)
3 users (show)

See Also:


Attachments
HTML file for reduced test case (9.52 KB, text/html)
2018-08-14 09:52 PDT, Eugene Wen
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Eugene Wen 2018-08-14 09:52:38 PDT
Created attachment 347085 [details]
HTML file for reduced test case

Steps to reproduce the problem:
1. Open index.html Page Attached
2.A. Click on "<" or ">" to initiate CSS transition / transform
2.B. Or on Mobile touchmove along the lettered elements to initiate CSS transition / transform

What is the expected behavior?
The expected behavior is a smooth transition of the lettered elements.

What went wrong?
The transition occurs but it is not smooth. See video for jitter reproduction.

Did this work before? N/A 

Does this work in other browsers? Yes

Video reference:
https://drive.google.com/open?id=1XpZ1f7_A6c2jytFJ0rwM4lFAYmHl9Ng4
Comment 1 Antoine Quint 2018-08-16 01:41:46 PDT
This doesn't reproduce with the Web Animations flags on, which is a good thing :) This can be verified with a Safari Technology Preview build.