IMG with position absolute invisible in Firefox while showing in IE, Chrome, Safari - why?

Question

The element with class slide in the following shall keep a fixed aspect ratio controlled by the padding-bottom:44%; in the CSS. Elements inside (images with class slide) shall be cropped to fit the box while scaled to 100% width.

Now my problem is that this works fine in Chrome, Safari, even IE but in Firefox it just won't show at all. Why is that?

My HTML:

<header class="swiper-container">
  <div class="swiper-wrapper">
        <div class="swiper-slide">
          <img class="slide" src="https://cranmoremtlodge.files.wordpress.com/2008/09/fall-foliage-003.jpg" />
        </div>
</header>

My CSS:

/*these two are mine*/
.swiper-slide {
  width: 1664px; /*assigned as element style by swiper*/
    position:relative;
  padding-bottom:44%;
  overflow: hidden;
}
.swiper-slide .slide {
  position:absolute;
  top:-50%; bottom:-50%;
  margin:auto;
  width: 100%;
  height: auto;
  background: teal;
}

/*these three come with www.idangero.us/swiper/ */
.swiper-wrapper {
    box-sizing: content-box;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%;
    z-index: 1;
}
.swiper-container {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 1;
}
.swiper-slide {
    flex-shrink: 0;
    height: 100%;
}

Fiddle: https://jsfiddle.net/smauo1wu/5/

score 1 · Accepted Answer · edited May 23 '17 at 12:33

You've got a lot going on in your code, and some of it is causing problems.

For instance, you're not adhering to the CSS rule for percentage heights. Also, your absolute positioning in .swiper-slide .slide doesn't appear to be necessary and is pushing your image off-screen on re-size (when other issues are resolved).

Anyway, here's some revised code that may help you. The image now appears and scales in all browsers (tested in Chrome, FF and IE11).

HTML (no changes)

Revised CSS

html, body { height: 100%; } /* NEW */

.swiper-container {
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    z-index: 1;
    height: 100%; /* NEW */
}

.swiper-wrapper {
    box-sizing: content-box;
    display: flex;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%;
    z-index: 1;
}

.swiper-slide {
  width: 1664px;
    position:relative;
  padding-bottom:44%;
  overflow: hidden;
  height: 100%; /* NEW */
  width: 100%;
}

.swiper-slide .slide {
  width: 100%;
  height: auto;
  background: teal;
}

DEMO

IMG with position absolute invisible in Firefox while showing in IE, Chrome, Safari - why?

1 Answers1