Bug 94407

Summary: Reflows occur during CSS Transform animation with certain child nodes
Product: WebKit Reporter: jalbers
Component: New BugsAssignee: Nobody <webkit-unassigned>
Status: UNCONFIRMED    
Severity: Normal CC: simon.fraser
Priority: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: All   
URL: http://jsfiddle.net/VkuhJ/
Attachments:
Description Flags
Developer Tools Timeline inspector screenshot none

jalbers
Reported 2012-08-17 18:51:45 PDT
Performing a CSS Transform animation on an element results in unnecessary reflows when the element contains one of the following nodes: -'select' element -'input' element of type 'text' with an associated placeholder containing text (Note: if the placeholder is empty, it does not cause reflows) See the associated jsfiddle: http://jsfiddle.net/VkuhJ/
Attachments
Developer Tools Timeline inspector screenshot (155.41 KB, image/png)
2012-08-20 13:28 PDT, jalbers 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
jalbers
Comment 1 2012-08-20 12:48:59 PDT
Adding the following node type to the list: -'input' element of type 'range'
Simon Fraser (smfr)
Comment 2 2012-08-20 13:04:51 PDT
How are you detecting unnecessary reflows? Your testcase looks fine to me in Mac Safari.
jalbers
Comment 3 2012-08-20 13:28:12 PDT
Created attachment 159509 [details] Developer Tools Timeline inspector screenshot From Chrome 23.0.1240.0 Canary
jalbers
Comment 4 2012-08-20 13:35:21 PDT
I'm using the Developer Tools "Timeline" inspector. Please see attached screenshot (using Chrome 23.0.1240.0 canary). With the elements set to their standard display property, there are numerous "Layout" records following the "mousedown" event. Set the trouble elements to "display: none;" and the "Layout" records disappear. I've also tested this against Mac Safari 6.0 (7536.25) with the same results.
Note You need to log in before you can comment on or make changes to this bug.