Menu icon Foundation
IE9 Off Canvas

Screenshot

So I am trying to get the off canvas to work in IE9.

The off canvas aside (hidden content) is appearing overtop.

I have the tab bar at the bottom of the content, I just rearranged the HTML to get it there. I tried switching the order and same issue.

IE9off-canvas

Screenshot

So I am trying to get the off canvas to work in IE9.

The off canvas aside (hidden content) is appearing overtop.

I have the tab bar at the bottom of the content, I just rearranged the HTML to get it there. I tried switching the order and same issue.

Trevor West over 5 years ago

I should have mentioned this is how it loads before the button to make the off canvas appear has been pressed. By default it is overlapping.

Trevor West over 5 years ago

I am not sure if anyone else is having this issue but I came up with an easy fix.

in header
<!--[if lt IE 10]>
public/css/ie9.css" rel="stylesheet">
<![endif]-->

In footer

<!--[if lt IE 10]>
public/js/ie9.js">
<![endif]-->

ie9.css

.right-off-canvas-menu {
width:0;
z-index:1005;
}

ie9.js

(function ( $ ) {
var width;
var csToggle = false;

$('.off-canvas-wrap').on('click', '.right-off-canvas-toggle, .exit-off-canvas', function() {
  width = (csToggle) ? 0 : 250;
  csToggle = (csToggle) ? false : true;

  $('#calendar-settings').animate({
    width: width+'px'
  });

  $('.main-section, .tab-bar').animate({
    left: '-'+width+'px'
  });
});

}( jQuery ));

Cliff Curtis over 5 years ago

Here's what fixed it for me...

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

Justin Balesteri over 5 years ago

@Cliff Curtis -

I am working on a project that I was halfway through developing when F5 was announced and I decided to upgrade it. I changed the comments as you suggest above, but now my menu will not appear at all in IE. I was curious if your menus are working fine.

abslayer over 5 years ago

Cliff Curtis' solution worked for. Thanks!

Steven Rosato over 5 years ago

Cliff Curtis' trick worked perfectly, I had conditionnals up to IE8, so I aadded another one for IE9

Trevor West over 5 years ago

Nice one Cliff.

Rafi Benkual over 5 years ago

@Cliff Curtis

Thanks for posting a solution here. This seems to be a bug. Could you post your fix as a pull request on GitHub? https://github.com/zurb/foundation/pulls

We can then merge the fix in if it makes no conflicts.

Thanks for your help!

Chris E over 5 years ago

Has anybody managed to make Off Canvas work correctly in IE9? I get the same problem with the left and right canvas being visible over the top of the page content and no fixes seem to be working for me. Any help much appreciated.

Abdullah Arif over 5 years ago

In addition to what @Cliff Curtis mentioned about IE9 conditionals, make sure you include:

  • css/normalize.css (this will give the correct display properties to on IE8/9)
  • js/vendor/modernizr.js (it has be the one in the vendor folder; js/modernizr.js was broken for me)

This is for Foundation 5.0.3 at least.

Wing-Hou Chan over 5 years ago

Hey Adam!

Could you post some code or a link to the site in development? It would help diagnosis!

Wing-Hou Chan over 5 years ago

Hey Adam!

Yep I'm seeing your problem in IE9. The computer I'm using at the moment is restricted from accessing IE's developer tools by group user policy so I'll take a look later this afternoon.

Hang in there for a while!

Wing-Hou Chan over 5 years ago

Hey Adam!

I just checked your source code.

I couldn't find this:

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

Although I did find this:

<html class="no-js" lang="en">

however you will need all the code provided by Cliff.

Wing-Hou Chan over 5 years ago

Hey Adam!

I've identified the problem. But before I tell you the solution I need to know if the problem is slightly deeper. Could you answer the following questions:

Which version (number) of Foundation are you using?
Are you using Foundation with CSS or SCSS?

If you are using Foundation with CSS, could you email me foundation.css?
If you are using Foundation with SCSS, could you email me _offcanvas.scss?

My email address is winghouchan@gmail.com. If you prefer to drop either of the files in a Dropbox and email me the link that will be great as well!

Wing-Hou Chan over 5 years ago

Hey Adam!

Thank you for the email! Here is the code you need:

.lt-ie10 .left-off-canvas-menu
{
  left: -250px; /* width of your menu */
}
.lt-ie10 .move-right > .inner-wrap
{
  left: 250px; /* width of your menu */
}

Remember to send me the original CSS file! Also please check at the top of any of Foundation's components (CSS/JS) for the version number. If the code is missing then I can identify if the problem is localized to a specific version and then give the guys at ZURB a heads up!

If anyone is experiencing a similar problem but their offcanvas menu is on the right, check if you have this code:

.lt-ie10 .right-off-canvas-menu
{
  right: -250px; /* width of your menu */
}
.lt-ie10 .move-left > .inner-wrap
{
  right: 250px; /* width of your menu */
}

Trevor West over 5 years ago

http://webdesign.tutsplus.com/articles/build-a-top-bar-off-canvas-navigation-with-foundation-5--webdesign-17767

This is a helpful blog post if anyone is messing with the top bar off canvas thing.

Toby Stokes about 5 years ago

Just a heads up,
I think off-canvas for ie9 is missing this block from 5.2.0:

// Opera 12.16 and IE9 - don't have 3d transforms
.csstransforms.no-csstransforms3d {
  .left-off-canvas-menu { @include translate2d(-100%, 0); }
  .right-off-canvas-menu { @include translate2d(100%, 0); }

  .move-left > .inner-wrap { @include translate2d(-($off-canvas-width),0); }
  .move-right > .inner-wrap { @include translate2d($off-canvas-width,0); }
}

Well I certainly had to add it back in after 5.2.3 upgrade