Some images "pushed down" 50% in IE

Hi,

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>

[cee-chen]

Thanks very much for the link! I’ve figured out the issue - Bootstrap’s CSS/carousel animation relies on this:

.carousel-inner>.item {
    display: none;
}

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:

1. Try another carousel lib that doesn’t rely on display: none - I personally use Slick slider 😃

2. Intercept Bootstrap’s JS and call objectFitPolyfill(); every time their sliding action occurs. Looks like they have an event we can hook onto:

$('#newsCarousel').on('slide.bs.carousel', function () {
  objectFitPolyfill();
})

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!

[HBOlsen]

This worked like a dream, thank you very much!