Google Chrome - Rendering Differences When Zooming In/Out

Google Chrome - Rendering differences when zooming in/out

In my experience this sort of thing is a rendering 'quirk', rather than a 'bug' per se. When you change the zoom level of a document, you're asking the browser to scale your '1px' border to a different number of pixels wide. Sometimes this doesn't equal a whole number of pixels, so the browser needs to do something to account for that. That something might be anti-aliasing, rounding widths to the nearest pixel, etc. This sort of thing needs to happen whenever you have anything that's not a whole number of pixels on screen. It's one of those things that happens at high-zoom levels, and in most cases it's not a big enough problem to worry about.

If it is a problem in your case, you can try doing things to minimise the effect, for example:

• Use non-pixel measurements border: 0.1rem solid #CCC
• Adjust the way the background is drawn: for example, include spacer elements between your buttons, and background color them, leaving the containing element background the same color as its border.
• Experiment with small margin, transform or position adjustments (0.5px - 1px) to nudge the element slightly over the border.

These are all indirect ways of tricking the browser's renderer into doing something that's better for your specific case, and I'm not sure any of these will actually work. They might have undesirable side effects in other OS's and browsers, too.

TL:DR - It's the browser, and don't worry about it unless you really need to!

What exactly changes in the css rendering, when desktop browsers zoom in or out on a website?

Zooming as implemented in modern browsers consists of nothing more
than “stretching up” pixels. That is, the width of the element is not
changed from 128 to 256 pixels; instead the actual pixels are doubled
in size. Formally, the element still has a width of 128 CSS pixels,
even though it happens to take the space of 256 device pixels.

In other words, zooming to 200% makes one CSS pixel grow to four times
the size of one device pixels. (Two times the width, two times the
height, yields four times in total).

Source:
Concept of device pixels and CSS pixels

Interesting Css rendering issue on zoom : browser renders a space gap between containers while zooming, occurs in every browser, but not in Firefox

Try to remove the border property in BigDiv class and create the second pseudo-class. I think it might be a blink engine rendering issue.

BigDiv class

display: flex;
min-width: 220px;
height: 100%;
position: relative;
padding: ${theme.spacing(2, 0)};
border-bottom: orange 5px solid; /* remove this */
background-color: transparent;
cursor: pointer;
text-align: center;
transition-delay: 0.5s;
will-change: transform;

/* Add this */
::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: orange;
}

document.addEventListener('DOMContentLoaded', function() {
  const click = document.querySelector('.big');
  const click2 = document.querySelector('.big2');

  click.addEventListener('click', e => {
    e.currentTarget.classList.toggle('active');
  });
  click2.addEventListener('click', e => {
    e.currentTarget.classList.toggle('active');
  });
});

.big,
.big2 {
  width: 220px;
  height: 100%;
  position: relative;
  padding: 1rem 2rem;
  background-color: transparent;
  cursor: pointer;
  text-align: center;
  transition-delay: 0.5s;
  will-change: transform;
}

.big {
  border-bottom: orange 4px solid;
}

.big::after,
.big2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: orange;
  animation: out 0.5s ease-in-out forwards;
  transform-origin: bottom center;
}

.big2::before {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: orange;
}

.big.active::after,
.big2.active::after {
  animation: in 0.5s ease-in-out forwards;
}

.second {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: relative;
  z-index: 1;
}

@keyframes in {
  0% {
    transform: scaleY(0);
    background-color: transparent;
  }
  100% {
    transform: scaleY(1);
    background-color: orange;
  }
}

@keyframes out {
  0% {
    transform: scaleY(1);
    background-color: orange;
  }
  100% {
    transform: scaleY(0);
    background-color: transparent;
  }
}

<div class="big">
  <div class="second">
    <p>Click to animate with border</p>
  </div>
</div>
<div class="big2">
  <div class="second">
    <p>Click to animate  pseudo-class</p>
  </div>
</div>

How to fix zoom issues with Google Chrome and 1px Width/Height DIVs?

I am actually trying to accomplish something similar with the same code and I ran into the same exact problem. I managed to fix the issue by setting the width and height to zero and putting a border-left on the vertical lines and a border bottom on the horizontal lines like so:

$('<div />').css({
        'top': 0,
        'left': i * size,
        'width': 0,
        'border-left': '1px solid #ccc',
        'height': height
      })
      .addClass('gridlines')
      .appendTo(sel);
  }

  for (i = 0; i <= ratioH; i++) { // horizontal grid lines
    $('<div />').css({
        'top': i * size,
        'left': 0,
        'width': width,
        'border-top': '1px solid #ccc',
        'height': 0
      })
      .addClass('gridlines')
      .appendTo(sel);
  }

Here is an updated version of your fiddle

Unexpected/Incorrect scale size for transform: scale when zoom in/out chrome browser

It is a bug... caused by the fact these browsers round coordinates to avoid antialiasing.

So when you set your zoom level to 120%, the small square should actually be rendered as a 1.2px*1.2px square prior transform.

But webkit browsers will round this value to 1px, even before they apply the transformation (I think FF also does but probably after transform).

So you won't see a change until you get to zoom 150%, where now it will get rounded to 2px and your blue square will get bigger than the same 100px*100px.

Only at 200% will they match again.

Not much to do to circumvent this, apart letting them know, and avoiding playing with such small elements ;-) (using a 10px*10px square and dividing the transform zoom level by 10 would prevent this bug).

Chrome and Firefox handle zoom differently. How to deal with this in my CSS

adding white-space:nowrap; to #menu keeps all menu items in one line during zoom, which means that my site now looks ok. However, chrome and firefox still behave differently under zoom, but i guess that's just something that developers have to allow for.

---

Related Topics