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   
Attachments:
Description Flags
Testcase
none
test script
none
before scroll
none
after scroll
none
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


<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>
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]
Testcase

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.