CODEWITHSUNDEEP
htmlcssfirefox
Tronix117
Tronix117

Reputation: 1985

Firefox - container does not adapt width to content when image is scaled down

I have a weird issue on Firefox, it kind of sounds like this one: https://bugzilla.mozilla.org/show_bug.cgi?id=829958 but it has been fixed few years ago.

I have an big image inside a wrapper having width: auto; height: 100%;. The only constraint applied to the image is height: 100%;.

The image is correctly scaled down on all browsers to the maximum height available. On almost all browsers, the wrapper is also scaled down to the new (and effective) size of the image. This is not the behavior on Firefox (tested on 50+), Firefox does scale down the image but not the wrapper who keep the original width of the image as its own width.

Here is a codepen to better simulate the issue: https://codepen.io/Tronix117/pen/MEogMv

The img-wrapper can not be in display: inline; because of effects applied on it. More intermediate div can be added if needed.

On the codepen, don't mind the fix width of scroll-wrapper it's a dynamic value, as well as all transforms values.

Images can be of various width and height and the CSS should be responsive.

The idea is to produce a coverflow with different images using Swiper lib.

I have been struggling on this all day, so thank you for your help!

CSS

html,
body {
  height: 100%;
  width: 100%;
}

* {
  padding: 0;
  margin: 0;
}

#viewport {
  position: absolute;
  top: 20px;
  bottom: 20px;
  left: 20px;
  right: 20px;
  overflow: hidden;
  display: block;
  perspective: 1200px;
  transform-style: preserve-3d;
}

#scroll-wrapper {
  display: block;
  position: relative;
  width: 3000px;
  height: 100%;
  transform-style: preserve-3d;
  transform: translate3d(-500px, 0, 0);
}

.img-wrapper {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  width: auto;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  border: 4px solid red;
}

img {
  height: 100%;
}

#img-wrapper-1 {
  border-color: blue;
  transform: translate3d(0px, 0px, -500px) rotateX(0deg) rotateY(30deg);
  z-index: -1;
}

#img-wrapper-3 {
  border-color: green;
  transform: translate3d(0px, 0px, -500px) rotateX(0deg) rotateY(-30deg);
  z-index: -1;
}

HTML

<html>
  <body>
    <div id="viewport">
      <div id="scroll-wrapper">
        <div id="img-wrapper-1" class="img-wrapper">
          <img src="http://via.placeholder.com/2000x1200" />
        </div>
        <div id="img-wrapper-2" class="img-wrapper">
          <img src="http://via.placeholder.com/2000x1200" />
        </div>
        <div id="img-wrapper-3" class="img-wrapper">
          <img src="http://via.placeholder.com/2000x1200" />
        </div>
      </div>
    </div>
  </body>
</html>

Upvotes: 2

Views: 1475

Answers (1)

AVAVT
AVAVT

Reputation: 7143

Very interesting problem!

It's most likely a bug with Firefox, though I think that it's probably caused by Firefox unable to find the correct reference height value for all the cascaded height: x%; of nested elements.

So I gave #viewport an explicit height value: height: calc(100vh - 40px); instead of an implicit one from top: 20px; bottom: 20px;. And it does work!

Demo: https://codepen.io/anon/pen/eGRYqx

Upvotes: 1

Related Questions