Menu icon Foundation
Foundation Flexbox Browser Support

Hi there,

 

I was just wondering: Does the Flexbox implementation in Foundation have the same compatibility as Flexbox in general (large amount of bugs on IE10 & IE11)?

Or are there any polyfills included that make the Foundation Flexbox work perfectly in IE10 and IE11?

 

Thanks,

Nils 

flexboxcompatibilitybrowser support

Hi there,

 

I was just wondering: Does the Flexbox implementation in Foundation have the same compatibility as Flexbox in general (large amount of bugs on IE10 & IE11)?

Or are there any polyfills included that make the Foundation Flexbox work perfectly in IE10 and IE11?

 

Thanks,

Nils 

Rafi Benkual almost 3 years ago

Yes, Foundation's flexbox grid is using the latest syntax so IE10+ is the compatibility. We've used on a few projects now with no major issues.

http://foundation.zurb.com/sites/docs/flex-grid.html#browser-support

Nils Wiere almost 3 years ago

Hi Rafi,

thanks a lot for clarifying! Good to know that you already use Flexbox without notifying bigger issues on IE10+. 

But that means, I have to take care about these IE-specific issues (listed on caniuse.com) by myself, right?

  • IE 11 does not vertically align items correctly when min-height is used
  • In IE10 and IE11, containers with display: flex and flex-direction: column will not properly calculate their flexed childrens' sizes if the container has min-height but no explicit height property.
  • IE 11 requires a unit to be added to the third argument, the flex-basis property
  • In IE10 the default value for flex is 0 0 auto rather than 0 1 auto as defined in the latest spec.

Best and thanks again!

Nils

Rafi Benkual almost 3 years ago

Correct - though many of those seem to be cases that wont come up often and have easy solutions.

I remember having to add a fallback width here and there but that all.

RCD almost 3 years ago

I just posted about this and then seen this thread.

I am using Foundation 6 Zurb Template with the flexgrid.

I have created icons with text centered below. Looks great on all browsers but on IE 11 the text aligns to the left and there is a large bottom margin below the icon image.

 

<div class="row small-up-4 medium-up-5 large-up-6 align-center">
        
<!-- Item 1 -->
        <div class="index-col columns">
          <div class="index-contain">
            <a href="#">
              <img class="index-icon" src="assets/img/img.png">
            </a>
            <a href="#" class="index-button">Title</a>
          </div>
        </div>
<!-- Item 2 -->
        <div class="index-col columns">
          <div class="index-contain">
            <a href="#">
              <img class="index-icon" src="assets/img/img.png">
            </a>
            <a href="#" class="index-button">Title</a>
          </div>
        </div>
<!-- Ect. 12 Items Total -->
</div>

Any IE11 hacks to get the text to align center?

Thank you!!