Bug 50552

Summary:

strange behavior of inputs/select after transfrom3d - scroll body and statusbar

Product:

WebKit

Reporter:

tomaszw <tw.general>

Component:

WebKit Misc.

Assignee:

Nobody <webkit-unassigned>

Status:

NEW

Severity:

Major

CC:

cmarrin, devinrhode2, simon.fraser

Priority:

Version:

528+ (Nightly build)

Hardware:

All

OS:

OS X 10.5

Attachments:

Description	Flags
Testcase	none
test script	none
before scroll	none
after scroll	none
after select	none

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.