Rangeslider rendering badly in some IE (JQueryMobile 1.3.1)
This very basic page:
does not render correctly in "some" IE versions.
- <!DOCTYPE HTML>
- <html>
- <head><title>Title</title>
- <meta name="viewport" content="width=device-width, initial-scale=1" />
- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" />
- <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
- <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.js"></script>
- </head>
- <body>
- <div id="A" name="A">
- <div data-role="rangeslider">
- <label for="B">Range</label>
- <input type="range" name="B" id="B" min="0" max="100">
- <label for="C">Range</label>
- <input type="range" name="C" id="C" min="0" max="100">
- </div>
- </div>
- </body>
- </html>
It stops on the script
jquery.mobile-1.3.1.js in this line:
- _sliderFirst = $.data( _inputFirst.get(0), "mobileSlider" ).slider,
with a SCRIPT5007 error
("Unable to get value of the property 'slider': object is null or undefined.")
I am using IE10 to debug and I have tested some combinations of Browser Mode (BM) and Document Mode (DM), to check the bad combinations. Hope this helps:
BM=IE10 DM=Standard [OK]
BM=IE9 DM=Standard [OK]
BM=IE8 DM=Standard [OK]
BM=IE7 DM=Standard [OK]
BM=IE10 DM=Non standard [OK]
BM=IE9 DM=Non standard [OK]
BM=IE8 DM=Non standard [OK]
BM=IE7 DM=Non standard [OK]
BM=IE10 DM=Standard IE9 [Error]
BM=IE9 DM=Standard IE9 [Error]
BM=IE8 DM=Standard IE9 [Error]
BM=IE7 DM=Standard IE9 [Error]
BM=IE10 DM=Standard IE8 [Error]
BM=IE9 DM=Standard IE8 [Error]
BM=IE8 DM=Standard IE8 [Error]
BM=IE7 DM=Standard IE8 [Error]
BM=IE10 DM=Standard IE7 [Error]
BM=IE9 DM=Standard IE7 [Error]
BM=IE8 DM=Standard IE7 [Error]
BM=IE7 DM=Standard IE7 [Error]
Thanks in advance for any suggestion.