Compatibility Issue with IE9 and Blogger

[yoboy7]

Hi there,

Appreciate your work. I've been trying to integrate your plugin in Blogger. It's working like a charm in Firefox, Chrome, Opera and Safari, but not in IE9. Here's a test page I've been working on:

http://yoboy-12.blogspot.com/

I've observed different outcomes in IE9: 1) When the page loads, the scrolltofixed element (the menu) dissapears 2) The menu is visible, but other elements in the page appear on top of it. 3) The menu is visible in maximised window, but it goes to top left when the window is made small of.

BTW, I tried your demo page on IE9 (http://jsfiddle.net/y3qV5/), and I couldnt see the floating box at all. I'm not sure on IE8.

Hope to hear from you soon. IE has always been a pain in the butt for me.

[bigspotteddog]

Thanks for the issue report. I will take a look as soon as I get a chance sometime today.

[yoboy7]

Thanks bigspotteddog. Please take your time.

[bigspotteddog]

Confirmed that this works with IE8, but does not work with IE9. IE - you gotta love it.

[bigspotteddog]

The http://yoboy-12.blogspot.com/ test page is working in IE9; however, there is a slight jump to the right when the menu goes "fixed." Need to look into that.

The demo fiddles do not work in IE9 due to IE9 stating that the plugin's script file was blocked due to a mime-type mismatch. Need to look at that too.

[yoboy7]

Thanks bigspotteddog. I've always hated IE. Here's what I see in IE9 (tested on two different machines):

http://i.imgur.com/LgraL.png

When the menu scrolls down, other elements just 'run over' it. I've tried playing with z-index values. I've assigned higher values to my scrolltofixed element and lower values to other elements, but it isn't changing anything. Good to know it's working with IE8. You'd hope a browser to get better when it is updated. Not with IE though..

[bigspotteddog]

All of the demo fiddles are now working with IE9. No code changes were made. I was using the "raw" file viewer to link the plugin's javascript in the fiddles and that is a no-no, especially for IE9 (github "raw" sends this header which was causing the script not to load -> X-Content-Type-Options: nosniff). I published the minified script to a github page and linked to that instead and that made them all work. I will have to look into the particular problem you are seeing in a bit.

[yoboy7]

I'm starting to think my copy of IE9 is broken, as I still can't get the fiddle page to work right. The cart stays fixed at one position. Here's a screenshot: http://i.imgur.com/cNB4D.png

Also, regarding my page, I can't tell if inserting scrolltofixed(min) code directly into my Blogger template has any effect to what I'm seeing in IE9. The thing is, it works fine across all other browsers. And prior to inserting direct script into my Blogger's template, I've tried linking raw js script from github raw page. It works fine in other browsers, but it seems like IE9 couldnt fetch the script at all. I tried uploading the .js file to Google sites and link from there, also no changes in IE9. When I include directly to the Blogger's template, IE9 does show the floating scrolltofixed element, but other elements appear on top of it.

Appreciate all your inputs. Thanks bigspotteddog!

[bigspotteddog]

Link to this scrolltofixed script for testing it out:

http://bigspotteddog.github.com/ScrollToFixed/jquery-scrolltofixed-min.js

Raw files on github definitely send headers that cause IE9 not to load the scripts. Check the headers from wherever you are linking from to make sure they do not contain this header: X-Content-Type-Options: nosniff. That is the header that cause IE9 to not load scripts.

I would imagine that your copy of IE9 is fine. Use this page (created yesterday) to test out the full functionality of the plugin:

http://bigspotteddog.github.com/ScrollToFixed

[bigspotteddog]

Try to unnest as much of the fixed element as possible. Looking at your test blog page, the nesting looks really deep. Also, even with Google Chrome, there is a jump to the right when it goes fixed. If you pop open the developer tools, then float over the #crosscol element (the one that will be fixed), it is reporting a position to the right of where it is visually displayed. This is where the element is jumping to when it goes fixed.

[bigspotteddog]

Here is a blog post that explains the z-index issue you are seeing:

http://www.davidtong.me/z-index-misconceptions-bugs-fixes/

[yoboy7]

That is it! You're brilliant. Unnesting does it for me, and it's working fine in IE9 now. I've noticed one thing though. Once I've started to scroll, when I restore down the size of my browser ('unmaximize' the window), the menu goes back up to its original position. Kinda like the browser just kills the script when the browser gets resized. The same happens when the browser gets maximised. This isn't the case in your Fiddle page. Any thoughts on this?

Here's some annotated screenshots: Maximised Browser Browser Unmaximised

I've tried changing $(document).ready(function() {} to $(document).bind('ready scroll click', function() {} to see if scrolling and clicking triggers back the script. Clicking seems to restore the menu, but scrolling doesnt.

[bigspotteddog]

I tried the page you linked above http://yoboy-12.blogspot.com/ but it was doing some weird thing with the scroll. The page was moving downward against the scroll, in Google Chrome. If you have a link that is kind of plain (no scripts running on scroll), I can take a look.

[yoboy7]

I have removed scroll from the bind, hope you can have a look and share what you think of it :)

[bigspotteddog]

On just a quick look, I would say the menu that is set to go fixed is still very deep in the nesting. Rather than setting #crosscol as the element to scrolltofixed, I would try using .tabs-outer.

[yoboy7]

That's funny. I've changed the scrolltofixed element from crosscol to tabs-outer yesterday itself, as per your advice to avoid nesting. I've checked again now and it is set to .tabs-outer in my template. Are you still seeing crosscol as my scrolltofixed element?

[bigspotteddog]

Must have been a cache thing. It looks different now.

[bigspotteddog]

Check your document mode in IE. It works fine with 8 and 9 standards mode, but not 7.

[yoboy7]

You're a hero! Pressed F12 on my IE9, developer tool poped up. I noticed that the document mode was set to IE7 (by default). I've never tempered with these settings before. Changing it to 'IE9 standard' fixed the issue!

Issue solved - it has always been (and always will) the browser. Big thanks bigspotteddog! :)

[bigspotteddog]

Glad it worked out. Best of luck!