Bug Tracker

Modify

Ticket #3260 (closed bug: fixed)

Opened 6 years ago

Last modified 3 years ago

Weird IE7 behavior when focussing on a text input inside a div with padding

Reported by: asprouse Owned by:
Priority: low Milestone: 1.next
Component: effects Version: 1.2.6
Keywords: IE7, slide Cc: flesler, asprouse
Blocking: Blocked by:

Description

Summary

Here is a very simple example which will produce this behavior:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Test</title>
            <script type="text/javascript" src="jquery-1.2.6.js"></script>
            <style type="text/css">
                #box {				
                    padding: 10px;
                }
            </style>
            <script type="text/javascript">
                function show () {
                    $("#box").slideDown("slow",function(){
                        $("#target").focus();
                    });
                }
            </script>
    </head>
    <body>
        <input type="button" value="Click Here" onClick="show()" />
            <div id="box" style="display:none">
                <input type="text" id="target" />
            </div>
    </body>
</html

What we want to happen is to use the slideDown effect to show the "box" div and then focus on the "target" input. This works fine in firefox, however IE7 starts to do the slide down effect and once the callback is performed, "target disappears and the cursor appears to the left of the button. This does not happen if the padding is removed. Another way in which this works properly is if there is something to delay the focus() function call. For example:

function show () {
    $("#box").slideDown("slow",function(){
        alert("BOO");
        $("#target").focus();
    });
}

or

function show () {
    $("#box").slideDown("slow",function(){        
        setTimeout(function(){$("#target").focus();},1);
    });
}

It seems as if there is some issue with the callback be fired while IE is still calculating the padding, but that is just a guess.

Steps to Repeat

  1. Copy the html code from above into an .html file
  2. Download the latest stable jQuery (at this time 1.2.6)
  3. Load the .html file created in step 1 into IE7
  4. Click the "Click Here" button

Attachments

ie7error.jpg Download (1.6 KB) - added by asprouse 6 years ago.
test.html Download (852 bytes) - added by asprouse 6 years ago.
test-3260.html Download (605 bytes) - added by dmethvin 4 years ago.

Change History

Changed 6 years ago by asprouse

comment:1 Changed 6 years ago by asprouse

Here is a screenshot of the error in IE7:

Changed 6 years ago by asprouse

comment:2 Changed 6 years ago by flesler

  • Cc flesler, asprouse added
  • Component changed from core to fx

comment:3 Changed 4 years ago by dmethvin

Attaching a test case with jQuery 1.4.2, which seems to work in IE8. Needs to be tested with IE7.

Changed 4 years ago by dmethvin

comment:4 Changed 3 years ago by SlexAxton

  • Keywords IE7, slide added
  • Priority changed from major to low
  • Status changed from new to open
  • Milestone changed from 1.3 to 1.5

Let's test Dave's patch and see if we think it's something we can get in soon. Seems valid as an IE7 compatibility issue.

comment:5 Changed 3 years ago by timmywil

  • Status changed from open to closed
  • Resolution set to fixed
  • Milestone set to 1.next

I believe this has been fixed  http://jsfiddle.net/timmywil/awxA9/show. Feel free to reopen and provide an updated test case if necessary.

comment:6 Changed 3 years ago by timmywil

#6767 is a duplicate of this ticket.

Please follow the  bug reporting guidlines and use  jsFiddle when providing test cases and demonstrations instead of pasting the code in the ticket.

View

Add a comment

Modify Ticket

Action
as closed
Author


E-mail address and user name can be saved in the Preferences.

 
Note: See TracTickets for help on using tickets.