Foundation-sites: IE11 image resizing bug using Cards and Flexbox

[bgarrant]

I just launched a site with Foundation 6.3.1 and when doing testing in IE11, we have noticed a bug when using the card component and flexbox. It appears that the images and not collapsing even though visually they look correct. There is extra added space under each image that happens to match the original image size. The bug looks like it may be same as this one: https://github.com/philipwalton/flexbugs/issues/75.

You can see the issue on two sites we have: https://www.consinfo.com/ and https://www.lakechamplainpools.com/pools/inground. There is a bunch of added space under each image when using the card component and IE11. Here is my code from consinfo.com. Sites looks perfect in all other browsers.

<div class="row" data-equalizer data-equalize-on="medium">
  <div class="small-12 medium-6 large-3 columns">
    <div class="card text-center" data-equalizer-watch>
      <div class="card-divider">
        <h5>JOB COST ACCOUNTING AND REAL ESTATE</h5>
      </div>
      <a href="https://www.consinfo.com/job-cost-accounting-and-construction-real-estate-software"><img src="https://www.consinfo.com/assets/images/_panelImages/Sage-100-image.jpg" alt="Sage 100 Image"></a>
      <div class="card-section">
        <p>No matter what your business needs-whether in your office or in the field-Sage offers construction software with
          roll-up-the-sleeves capabilities that help you get the job done right.</p>
      </div>
      <div class="align-bottom">
        <p><a href="https://www.consinfo.com/job-cost-accounting-and-construction-real-estate-software" class="button" role="button">Read More</a></p>
      </div>
    </div>
  </div>
  <div class="small-12 medium-6 large-3 columns">
    <div class="card text-center" data-equalizer-watch>
      <div class="card-divider">
        <h5>ESTIMATING SOLUTIONS FOR ANY TYPE PROJECT</h5>
      </div>
      <a href="https://www.consinfo.com/products/sage-estimating"><img src="https://www.consinfo.com/assets/images/_panelImages/iStock_000016213049Small.jpg" alt="I Stock 000016213049 Small"></a>
      <div class="card-section">
        <p>Ideal for just about any size construction company wanting to automate estimating. Speed up your estimating process
          with a solution that works, so you can build bids faster and with confidence.</p>
      </div>
      <div class="align-bottom">
        <p><a href="https://www.consinfo.com/products/sage-estimating" class="button" role="button">Read More</a></p>
      </div>
    </div>
  </div>
  <div class="small-12 medium-6 large-3 columns">
    <div class="card text-center" data-equalizer-watch>
      <div class="card-divider">
        <h5>SAGE CONSTRUCTION PROJECT CENTER</h5>
      </div>
      <a href="https://www.consinfo.com/products/sage-construction-project-center"><img src="https://www.consinfo.com/assets/images/_panelImages/Construction-project-center-image.jpg" alt="Construction Project Center Image"></a>
      <div class="card-section">
        <p>Keep everyone on the project in the loop with timely, convenient, and secure access to the project-related details
          they need in order to take action swiftly and confidently.</p>
      </div>
      <div class="align-bottom">
        <p><a href="https://www.consinfo.com/products/sage-construction-project-center" class="button" role="button">Read More</a></p>
      </div>
    </div>
  </div>
  <div class="small-12 medium-6 large-3 columns">
    <div class="card text-center" data-equalizer-watch>
      <div class="card-divider">
        <h5>IT AND HARDWARE CONSULTING</h5>
      </div>
      <a href="https://www.consinfo.com/services/it-and-hardware-consulting"><img src="https://www.consinfo.com/assets/images/_panelImages/IT-Consulting-and-Services-pic.JPG" alt="It Consulting And Services Pic"></a>
      <div class="card-section">
        <p>Whether you&#039;re in the market for a new laptop for personal use, or a business-class server to power your entire
          company, the Computer Shop at CIS can help you find the best solution for your needs.</p>
      </div>
      <div class="align-bottom">
        <p><a href="https://www.consinfo.com/services/it-and-hardware-consulting" class="button" role="button">Read More</a></p>
      </div>
    </div>
  </div>
</div>

[bgarrant]

@IamManchanda ever seen anything like this? I can't figure out why it is happening.

[IamManchanda]

@bgarrant Will look soon .... Currently busy with some other tasks!

[rafibomb]

Thanks for posting this! I haven't seen it before which is odd. Looks like that flexbug you linked to is the reason - looks there is a workaround in the post or using smaller images might help. Since it's not directly repeated to a Foundation component we'll close this here.

[bgarrant]

The fix in that link did not work for me.

[bgarrant]

I also tried running postcss-flexbugs-fixes with no luck

[bgarrant]

This seems to fix the issue, but it seems like we may need a card wrapper element for images to avoid this IE11 issue. We have card-section and card-divider and maybe we need card-image with this simple code:

.card-image {
  min-height: 1px;
}

md5-839ea394066279bd91e1bfa27443bf7e

[bgarrant]

I can confirm that adding a .card-image class will resolve the issue. See https://www.consinfo.com/.

[IamManchanda]

I don't know right now whether the above comments helps or not... But reopening based on above comments
Will look into it soon!

[bgarrant]

@IamManchanda Let me know what you think

[IamManchanda]

I will surely let you know... Will test it out tomm and let you know!

[IamManchanda]

In the meantime if you can provide a codepen example then that will be great!

[bgarrant]

I am not sure how to do that @IamManchanda. This code above should reproduce the issue on F 6.3.1. Can you use it?

[bgarrant]

@IamManchanda Any chance to look at this Harry? The fix seems to work but not sure if best way.

[IamManchanda]

Oh sorry i missed the last comment ....
Can you fork this codepen and provide a codepen with the fix
=> https://codepen.io/IamManchanda/pen/zZrBEv ??

PS: This pen includes foundation with flex grid, motion ui so you just need to add your code!

[bgarrant]

Please check out this fix in the CSS. If you add that class to wrap images it fixes the IE11 bug.

https://codepen.io/bgarrant/pen/QvPVjZ

[IamManchanda]

Yup just tested in IE11
and see the bug https://codepen.io/IamManchanda/pen/MmRqvN

We dont have a .card-image in our framework untill now
I think the best way to go around this to create one
and in the docs the information about the bug and using .card-image
What do you think @kball ??

[bgarrant]

Glad we were able to find a fix.

[bgarrant]

@IamManchanda do you have a way to test in IE10 just so we know it works with all the browser Foundation supports?

[IamManchanda]

No within IE10 ... this is not the bug

[bgarrant]

Good. Just an IE11 issue then.

[IamManchanda]

Ohk i added a PR #10082 ....