Some images "pushed down" 50% in IE
See original GitHub issueHi,
I’m having an issue where the first image in a Bootstrap caraousel renders correct but any images after the initial one is “pushed down” 50% of the carousel high. This only happens in IE and Edge, Chrome shows all images as expected using normal CSS…
The first image:
Incorrect rendering:
If I disable this CSS property in Edge, it shows all images correctly
Is this a bug or am I doing something wrong? My implementation of the “inner carousel” is as follows:
<div class="carousel-inner" role="listbox">
<div class="item active">
<img data-object-fit src="images/carousel/MyImage1.jpg" alt="Image">
</div>
<div class="item">
<img data-object-fit src="images/carousel/MyImage2.jpg" alt="Image">
</div>
<div class="item">
<img data-object-fit src="images/carousel/MyImage3.jpg" alt="Image">
</div>
<div class="item">
<img data-object-fit src="images/carousel/MyImage4.jpg" alt="Image">
</div>
</div>
Issue Analytics
- State:
- Created 7 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Images max-width max-height not working in IE 11
Using viewport units vw and vh instead of percentage for max-width and max-height.
Read more >Picture perfect images with the modern <img> element
The most common causes of CLS include images without dimensions (see below), which can push down content when they load and snap into...
Read more >How to push negative search results down: 4 steps to bury them
Want to push down negative search results about you? Here are 4 sure-fire steps to doing just that. So, how do you push...
Read more >Cannot See Some Pictures - OnePlus Community
Since few days ago i cannot see many pictures on the forum (either in post and signatures). Instead of some picture i see:...
Read more >GitHub — CS50 Docs
Tools like check50 and submit50 rely on git , a popular tool for ... To push (i.e., save) your code to GitHub using...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Thanks very much for the link! I’ve figured out the issue - Bootstrap’s CSS/carousel animation relies on this:
And unfortunately
display: none
zeroes out an element’s height, which explains why the polyfill is incorrectly calculating the height of.item
.Two solutions I can suggest:
Try another carousel lib that doesn’t rely on display: none - I personally use Slick slider 😃
Intercept Bootstrap’s JS and call
objectFitPolyfill();
every time their sliding action occurs. Looks like they have an event we can hook onto:It’s not super performant since it’s re-checking the entire page for object-fit images every time the carousel slides, but it solves the problem I suppose 😃 You can check out this Codepen fork to confirm that it works in IE!
This worked like a dream, thank you very much!