Bug 188558

Summary: CSS transition with CSS transform exhibits unintended jitter
Product: WebKit Reporter: Eugene Wen <eugene>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED CONFIGURATION CHANGED    
Severity: Normal CC: dino, graouts, simon.fraser
Priority: P2    
Version: Safari 11   
Hardware: iPhone / iPad   
OS: iOS 11   
Attachments:
Description Flags
HTML file for reduced test case none

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.