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: P2    
Version: 528+ (Nightly build)   
Hardware: All   
OS: OS X 10.5   
Description Flags
test script
before scroll
after scroll
after select none

Description tomaszw 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

    body {

        -webkit-transform-style: preserve-3d;
        -webkit-transform: perspective(-900);
        overflow: hidden;

        overflow: hidden;
        display: inline-block;


    input, select, select:focus, input:focus, textarea {
    -webkit-transform: scale(1,1);


    function scrollleft()
        document.getElementById('pages').style.webkitTransform = 'translate3d(-1300px, 0, 0)';

    <button onclick="scrollleft()">lewo</button>
    <div id="pages" name="pages" >
        <div id="page1">
            this is page 1
        <div id="page2">
            this is page 2

Comment 1 tomaszw 2010-12-05 23:36:32 PST
just click button to scroll pages
Comment 2 Simon Fraser (smfr) 2010-12-06 11:44:09 PST
Created attachment 75717 [details]

Attached testcases are much more useful than markup pasted into comments, since they can be run directly.
Comment 3 Simon Fraser (smfr) 2010-12-06 11:46:02 PST
By "strange behavior" do you just mean the temporary jump, or something more?
Comment 4 tomaszw 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)
Comment 5 tomaszw 2010-12-06 12:22:10 PST
Created attachment 75723 [details]
before scroll
Comment 6 tomaszw 2010-12-06 12:22:39 PST
Created attachment 75724 [details]
after scroll
Comment 7 tomaszw 2010-12-06 12:22:57 PST
Created attachment 75725 [details]
after select
Comment 8 Devin Rhode 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
Comment 9 Simon Fraser (smfr) 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.