Bug 136697

Summary:	Transform animation incorrect on online demo
Product:	WebKit	Reporter:	Dirk Schulze <krit>
Component:	CSS	Assignee:	Nobody <webkit-unassigned>
Status:	NEW ---
Severity:	Normal	CC:	ahmad.saleem792, dino, eoconnor, graouts, jonlee, simon.fraser, zalan
Priority:	P2
Version:	528+ (Nightly build)
Hardware:	Unspecified
OS:	Unspecified
URL:	http://codepen.io/miukimiu/pen/DkvnA

Description Dirk Schulze 2014-09-10 01:52:53 PDT

I did not check the demo in detail yet, but WebKit is the only browsers that does not render the spinning lines on the tape correctly.

http://codepen.io/miukimiu/pen/DkvnA

Comment 1 Jon Lee 2014-09-10 12:15:41 PDT

Side note: I am seeing some incorrect positioning at .5x on some iPhones.

Comment 2 Simon Fraser (smfr) 2014-09-10 12:29:15 PDT

Incorrect tick placement in the hubs is caused by use of unprefixed transform-origin.

The jumpiness happens because the keyframes rotate from 0->180deg, rather than 0->360deg. I see jumpiness in Chrome too.

Comment 3 Dirk Schulze 2014-09-11 05:20:52 PDT

(In reply to comment #2)
> Incorrect tick placement in the hubs is caused by use of unprefixed transform-origin.
> 
> The jumpiness happens because the keyframes rotate from 0->180deg, rather than 0->360deg. I see jumpiness in Chrome too.

Can confirm that it is just a problem of prefixing. However, there is a visual difference that seems to be a precision problem. Is that because of pixel rounding?

I am fine with closing this bug in general.