foundation-sites: IE11 image resizing bug using Cards and Flexbox
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'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>

About this issue
- Original URL
- State: closed
- Created 7 years ago
- Comments: 21 (9 by maintainers)
Commits related to this issue
- Closes #10079 - Fix a flexbug for cards on IE11 Changes - Fix browser specific bug - Update docs! — committed to IamManchanda/foundation-sites by IamManchanda 7 years ago
- Merge pull request #10082 from IamManchanda/bug/browser/IE11-card-image Closes #10079 - Fix a flexbug for cards on IE11 — committed to foundation/foundation-sites by kball 7 years ago
Good. Just an IE11 issue then.
@IamManchanda do you have a way to test in IE10 just so we know it works with all the browser Foundation supports?
Yup just tested in IE11 and see the bug https://codepen.io/IamManchanda/pen/MmRqvN
We dont have a
.card-imagein 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-imageWhat do you think @kball ??@IamManchanda Any chance to look at this Harry? The fix seems to work but not sure if best way.
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-sectionandcard-dividerand maybe we needcard-imagewith this simple code: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.
@IamManchanda ever seen anything like this? I can’t figure out why it is happening.