Menu icon Foundation
Foundation 5 does not work for IE 9

Hey Guys,

I have been using Foundation 5 in my Ruby on Rails App. The app is mainly based on JS, CoffeeScript, Haml, SASS.

I am into one issue that I wanted to discuss and figure out why is it happening. The site is up and live and working smoothly

http://www.protenders.com

The issue is that on your support page you have mentioned that Foundation 5 works for IE 9 but lately I have figured out that it has a weird kind of behavior with IE 9 users. I noticed and received feedback that for some of the Users of IE 9 the website does not work. For this particular case we have applied the not supported page while we don't want to do it.

We would like Foundation to work for IE 9 as well as that is some good User base.

Can you guys help me figure out this issue like where and what am I or might be doing wrong?

Its really urgent as the site is live and we are losing our potential Users :(

I shall be waiting for a reply soon. Let me know if you need anything more from me.

Thanks
Azan

Foundation 5ruby on railshamlSassjs

Hey Guys,

I have been using Foundation 5 in my Ruby on Rails App. The app is mainly based on JS, CoffeeScript, Haml, SASS.

I am into one issue that I wanted to discuss and figure out why is it happening. The site is up and live and working smoothly

http://www.protenders.com

The issue is that on your support page you have mentioned that Foundation 5 works for IE 9 but lately I have figured out that it has a weird kind of behavior with IE 9 users. I noticed and received feedback that for some of the Users of IE 9 the website does not work. For this particular case we have applied the not supported page while we don't want to do it.

We would like Foundation to work for IE 9 as well as that is some good User base.

Can you guys help me figure out this issue like where and what am I or might be doing wrong?

Its really urgent as the site is live and we are losing our potential Users :(

I shall be waiting for a reply soon. Let me know if you need anything more from me.

Thanks
Azan


Michael Egan gave the most helpful answer for this post
Michael Egan over 4 years ago

@Azan Abrar, you may want to look at http://snippet.bevey.com/css/selectorCount.php, http://stackoverflow.com/questions/9906794/internet-explorers-css-rules-limits and http://blesscss.com/

This was my issue IE9 has a limit on selectors per sheet

This post has been closed. No new replies can be added.

James Stone almost 5 years ago

Your browser detection script is firing incorrectly. You can always test on sauce labs and browserstack. Both have a free / trial account / tier.

http://cl.ly/image/3Z343v0N3A2y

Lyn almost 5 years ago

Hey there,

@James : It's just the page that's not up-to-date but Azan said they added IE9 too so that's why you're getting it.

@Azan : We would like to help you out, but we need to know what the strange behaviors are. Did you make a list of those which have been reported to you ?
If not, you need to install some IE9, try the website as much as you can, and note down every possible problem you encounter (and the page it occurs on).
When that's done, post it here with some login/password (if required to check everything) and we'll jump in it to give you a hand !

Kind regards,

Lyn.

Azan Abrar almost 5 years ago

@lyn Hey Lyn,

Thanks for replying man. I would need to remove this validation check for IE 9 browser to let normal website load for IE 9 as well and to show you what exactly happens. May be you can check it out too on the staging server.

I will let you know once I do that. But before that I do have noted some points that I would like to add to brief you more about the problem we are facing:

  1. On IE 9 no styles are applied to any classes, elements or anything. If you look into the source of that page you will notice that the stylesheet is loaded properly. But what happens is that if you try to inspect any element you will notice no styles are applied to it except few default browser styles.

  2. The IE9 browser has similar broken UI as IE 8 has.

  3. There is one weird thing that happens a lot. If you have installed IE 10 or IE 11 and you go back to browser IE 9 by changing browser mode. Everything works as expected. But for some users who have IE 9 installed they see it broken always.

This is what happens on IE 9 if we run it in browserstack

http://www.browserstack.com/screenshots/26f23ef26c62306f1562c518774a9222554389e1/win7_ie_9.0.jpg

Let me know if you need anything more.

Thanks
Azan

James Stone almost 5 years ago

@Azan there is no way to help you troubleshoot it unless you can point to a live working version that will load in ie9. You still have your browser detection on the main site. Post a URL to your staging server or otherwise. You can DM me on twitter if you want to keep it private.

Taking a wild guess, you might need to run a html5 shim or polyfill.

Azan Abrar almost 5 years ago

Hey James,

Thanks for replying back. I was discussing your concern with my team and now we have enabled the Website on our staging server for IE9.

You can access it on :

https://zts.protenders.com/

We have been looking into this for a long time. So it would be great if you can help us in any way and reply as early as possible since website is live already and we have quite a number of our Users using IE 9.

Let me know if you need anything else.

Thanking you in anticipation

Thanks
Azan

Azan Abrar almost 5 years ago

@james Hi

Any update on that? Can I here from you soon? It would be great if you can reply and help us soon?

Thanks

Michael Egan over 4 years ago

@Azan Abrar, you may want to look at http://snippet.bevey.com/css/selectorCount.php, http://stackoverflow.com/questions/9906794/internet-explorers-css-rules-limits and http://blesscss.com/

This was my issue IE9 has a limit on selectors per sheet

Luke Noel-Storr over 4 years ago

Did you ever resolve this issue? I'm also having issues with Foundation 5 in IE 9.

I also notice that even http://foundation.zurb.com does not get styled in IE9, but (as Azan mentions above) does work in IE10 in IE9 mode.

Luke Noel-Storr over 4 years ago

Ah, doh! My issue was actually because the line:

<!--[if IE 9]><html class="lt-ie10" lang="en" > <![endif]-->

didn't include an AngularJS directive, and so Angular wasn't loading the content.

You Zurb guys may still want to look into why foundation.zurb.com isn't working in IE9, though.

Tamilanban.Deva over 4 years ago

Guys, any one find the solution for IE-9 issues. Am also facing the same issues,
The CSS file was not loading in IE9.
if we need to add anything like that? in layout files.
<!--[if IE 9]> <![endif]-->

Michael LaRoy over 4 years ago

Michael Egan, above, is right about IE9 having selector limits. On recent projects I've had to remove all of the unused Foundation styles by commenting out the @import bits in the _foundation.scss file that adds them all to the project. Without all of the extra styles you're not using, IE9 is capable of handling everything.

So, if you're not using Magellan or Joyride etc., get rid of it!