A part of border is not visible on Firefox when scaling element

Question

I am scaling proportionally image to fill all available space using solution proposed here. Everything is working fine on Chrome but on Firefox there is a problem with border:

Chrome:

Firefox:

The code with example is available here (codesandbox). I would like to understand what is going on there on Firefox and how to solve it.

var wrapper = document.querySelector('#scaler');
var iteration = 20
var direction = 1;
setInterval(function() {
  direction = iteration > 40 ? -1 : iteration < 20 ? 1 : direction;
  iteration+=direction;
  wrapper.style.transform = "scale(" + (iteration * .01) + ")"
}, 1000)

.App {
  font-family: sans-serif;
  text-align: center;
  margin-top: 50px;
}

.root {
  width: 100%;
  text-align: center;
  position: relative;
  -webkit-flex: 1 1 auto;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  max-height: 40vh;
  height: 100vh;
}

.image-wrapper {
  height: 100%;
  width: 100%;
  position: absolute;
  padding: 0 10px;
  box-sizing: border-box;
  will-change: opacity, transform;
}

.overlay-wrapper {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transform-origin: center center;
  -ms-transform-origin: center center;
  transform-origin: center center;
  border: 1px magenta solid;
}

.overlay-wrapper img {
  display: block;
}

<div id="root">
  <div class="App">
    <div class="root">
      <div class="image-wrapper" id="scaler" style="transform: scale(.2);">
        <div class="overlay-wrapper"><img alt="" src="https://dummyimage.com/1420x802/ccc/333"></div>
      </div>
    </div>
  </div>
</div>

I've made a snippet from your app. I added an animation. In that I see the issue in Chrome, too. — yunzen, Mar 01 '19 at 08:39
@yunzen so the problem is simply that a browser cannot display 1px border when scaling? It is a bit confusing. Then I need to find another way to display the image with the border... — Darkowic, Mar 01 '19 at 08:51
The border is in a child element of your scaled element. So it is of course scaled as well. If you scale something that has 1px structure (in this case your border), the scale will not only affect the width of that structure, but also the coordinates. You might end up losing all of the structure, because it *sits between the pixels*. You have to see that browsers do not have very sophisticated scaling algorithms due to performance reasons. — yunzen, Mar 01 '19 at 08:59
You cannot do it like this. At first, you should declare, what you really want to achieve. This declaration should have the words 'maximum width', 'minimum width', 'maximum height', 'minimum height', 'aspect ratio', 'window resize', etc in it — yunzen, Mar 01 '19 at 09:02
Dynamic size container and I want to fill whole available space keeping image proportions. This should be a general solution. — Darkowic, Mar 01 '19 at 09:05

yunzen · Answer 1 · 2019-03-01T09:26:07.080

How about this solution?

.container {
  width: auto;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  margin: 0 auto;
  overflow: hidden;
  position: relative;
}
.container img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  max-width: 100%;
  box-sizing: border-box;
  max-height: 100%;
  height: auto;
  width: auto;
  border: 1px solid grey;
  margin: auto;
}

body {
  margin: 0;
  padding: 0;
}

/* for demonstration purpose */
body {
  animation: mw 10s alternate infinite linear;
  background: gold;
  margin: 0 auto;
}


@keyframes mw {
  from {
    width: 400px;
  }
  to {
    width: 200px;
  }
}

<div class="container">
  <img src="https://dummyimage.com/1420x802/ccc/333" alt="">
</div>

See this codepen for an unanimated version: https://codepen.io/HerrSerker/pen/WmrZZa?editors=1100

You should also see this answer: https://stackoverflow.com/a/26967278/476951

A part of border is not visible on Firefox when scaling element

1 Answers1