NEW 50552
strange behavior of inputs/select after transfrom3d - scroll body and statusbar 
https://bugs.webkit.org/show_bug.cgi?id=50552
Summary strange behavior of inputs/select after transfrom3d - scroll body and statusbar
tomaszw
Reported 2010-12-05 23:35:17 PST
<select> control that is invisible in time of "transfrom3d" execution, make strange behavior after click (move body tag for several pixels, as well as status bar) quick reproduction: 1. create two divs, float lefts, inline-block in one large div 2. apply overflow:hidden on body 3. make transfrom3d with negative value (scroll div container left) example code below <style> body { -webkit-transform-style: preserve-3d; -webkit-transform: perspective(-900); width:1200px; overflow: hidden; } #pages { width:5000px; overflow: hidden; display: inline-block; } #page1,#page2 { width:1300px; float:left; display:inline-block; } input, select, select:focus, input:focus, textarea { -webkit-transform: scale(1,1); } </style> <script> function scrollleft() { document.getElementById('pages').style.webkitTransform = 'translate3d(-1300px, 0, 0)'; } </script> <html> <button onclick="scrollleft()">lewo</button> <br> <div id="pages" name="pages" > <div id="page1"> this is page 1 <select> <option>1123123</option> <option>123</option> <option>123</option> </select> </div> <div id="page2"> this is page 2 <select> <option>1</option> <option>123</option> <option>123</option> </select> </div> </div> </html>
Attachments
Testcase (1.17 KB, text/html)
2010-12-06 11:44 PST, Simon Fraser (smfr) 		no flags
Details
test script (1.17 KB, text/html)
2010-12-06 12:21 PST, tomaszw 		no flags
Details
before scroll (52.79 KB, image/png)
2010-12-06 12:22 PST, tomaszw 		no flags
Details
after scroll (47.75 KB, image/png)
2010-12-06 12:22 PST, tomaszw 		no flags
Details
after select (58.76 KB, image/png)
2010-12-06 12:22 PST, tomaszw 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
tomaszw
Comment 1 2010-12-05 23:36:32 PST
just click button to scroll pages
Simon Fraser (smfr)
Comment 2 2010-12-06 11:44:09 PST
Created attachment 75717 [details] Testcase Attached testcases are much more useful than markup pasted into comments, since they can be run directly.
Simon Fraser (smfr)
Comment 3 2010-12-06 11:46:02 PST
By "strange behavior" do you just mean the temporary jump, or something more?
tomaszw
Comment 4 2010-12-06 12:21:44 PST
Created attachment 75722 [details] test script 1. make browser width to less than 1000; 2. open page (test script) 3. push "left" button 4. click on second <select> (right side of page) 5. the select component will fly to the left, values will be listed outside of the browser (see attachments before_left and after_left and after_click)
tomaszw
Comment 5 2010-12-06 12:22:10 PST
Created attachment 75723 [details] before scroll
tomaszw
Comment 6 2010-12-06 12:22:39 PST
Created attachment 75724 [details] after scroll
tomaszw
Comment 7 2010-12-06 12:22:57 PST
Created attachment 75725 [details] after select
Devin Rhode
Comment 8 2012-01-17 08:54:37 PST
I would suspect this is somewhat related to this bug: https://bugs.webkit.org/show_bug.cgi?id=31852 but I'm not sure. Just wanted to key you in
Simon Fraser (smfr)
Comment 9 2012-01-17 09:12:58 PST
Not related. This is happening because the focus ring causes layer sizes to change, and the huge tiled layer is drawing asynchronously.
Note You need to log in before you can comment on or make changes to this bug.