Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Some images "pushed down" 50% in IE

See original GitHub issue


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: correct_render

Incorrect rendering: incorrect_render

If I disable this CSS property in Edge, it shows all images correctly css_property

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 class="item">
        <img data-object-fit src="images/carousel/MyImage2.jpg" alt="Image">
     <div class="item">
         <img data-object-fit src="images/carousel/MyImage3.jpg" alt="Image">
     <div class="item">
         <img data-object-fit src="images/carousel/MyImage4.jpg" alt="Image">

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:6 (3 by maintainers)

github_iconTop GitHub Comments

cee-chencommented, Jan 14, 2017

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('', function () {

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!

HBOlsencommented, Feb 20, 2017

This worked like a dream, thank you very much!

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found