Bug 188558

Summary:

CSS transition with CSS transform exhibits unintended jitter

Product:

WebKit

Reporter:

Eugene Wen <eugene>

Component:

CSS

Assignee:

Nobody <webkit-unassigned>

Status:

RESOLVED CONFIGURATION CHANGED

Severity:

Normal

CC:

dino, graouts, simon.fraser

Priority:

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.