Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Dynamically loading jQuery mobile causes IE to minimize

Okay, this is by far the weirdest bug I have ever encountered. It's pretty straightforward though. If I load jQuery and then jQuery mobile dynamically in any version of Internet Explorer, the actual IE window minimizes. This happens in all versions of IE through IETester, however, if I run the full version in IE9, it kicks compatibility mode and for some reason doesn't minimize.

I've tried various ways of loading the scripts (commented in the example code), all resulting in the same behaviour.

Why is this happening? Is there a way around it?

http://jsfiddle.net/Xeon06/RCsuH/

like image 278
Alex Turpin Avatar asked Aug 23 '11 15:08

Alex Turpin


1 Answers

This is a known issue in jQuery mobile. The offending line is jquery.mobile.navigation.js:913.

// Kill the keyboard.
// XXX_jblas: We need to stop crawling the entire document to kill focus. Instead,
//            we should be tracking focus with a live() handler so we already have
//            the element in hand at this point.
// Wrap this in a try/catch block since IE9 throw "Unspecified error" if document.activeElement
// is undefined when we are in an IFrame.
try {
    $( document.activeElement || "" ).add( "input:focus, textarea:focus, select:focus" ).blur();
} catch(e) {}

There's the call to blur() that's sending IE windows to the back of the stack.

As a workaround, you can avoid this by placing the script tags physically in the <head> of the HTML.

<!DOCTYPE HTML>
<html>
  <head>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css" />
    <script src="http://code.jquery.com/jquery-1.6.2.js"></script>
    <script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>

...

Placing the script tags elsewhere in the document or inserting them via script triggers the bug.

This Fiddle demostrates the workaround in action. Note that this only works in a top-level document. If the document is in an <iframe>, the bug will still appear. Thus, if you open the JSFiddle editor in IE 7/8, it will still get sent to the back; but if you open just the rendered HTML, it will not.

like image 195
josh3736 Avatar answered Oct 18 '22 20:10

josh3736