Bug 152975

Summary: Element translated out of container containing text does not render until transition end
Product: WebKit Reporter: Ben Frain <contact>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED FIXED    
Severity: Major CC: simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: iPhone / iPad   
OS: iOS 9.0   

Description Ben Frain 2016-01-11 09:45:41 PST 
Here is a reduction. Behaviour is as expected in desktop Safari/WebKit. iOS has the problem (tested in iOS 9.2).

http://codepen.io/benfrain/full/PZjpxr

We have two divs inside another div. Both internal divs have a different colour background. One div has text in, one does not.

When the button is clicked both divs translate out of their parent container (via transform3d). When the button is clicked again to toggle the class off, only the div without text transitions back to it's state as expected. The other does not appear until transition end.
Comment 1 Simon Fraser (smfr) 2016-01-11 22:23:42 PST 
Odd that iOS would be different from Mac.
Comment 2 Alexey Proskuryakov 2016-09-08 14:00:58 PDT 
<rdar://problem/28213700>
Comment 3 Ben Frain 2019-08-30 07:27:06 PDT 
Can't replicate in iOS12