Borders on Certain Zoom Levels on Webpage

Borders on certain zoom levels on webpage

This sounds similar to space/gaps between divs on website when viewed on iPhone/iPad ("On an iPad, when a website is viewed at a scale under 100%, some artefacts appear sometimes. One is particularly visible: a 1 pixel lines between divs, just like on your site, under the menu")

The solution to that answer suggests you either:

• Disable zooming (if you have designed for viewing at that particular size)
• Have a 1px overlap on elements (e.g. margin: -1px)

The overlap fix has worked for me in the past, though this might be harder with a table-based layout.

border size change if i zoom the page

Chrome is better at sub pixel rendering so the issue is usually not observed, but many browsers will round things to integer number of pixels, which will cause similar problems as this one.

When your border is 2px and you scale by 0.7, you get 1.4px and might be rounded to 1px by some browser (eating up 0.8px considering both sides of the element). When there's lots of rounding piling around (such as paddings, margins, height etc.), you may loose a sum of 2px to 4px which could be quite significant.

Borders disappear in Chrome when I zoom in

I'm pretty sure that Luís Pureza has solved his issue, but I found a really easy way to solve it changing only this:

If you have a table border like this one:

INPUT,TEXTAREA {
border-top: 1px solid #aaa
}

Change it to this one:

INPUT,TEXTAREA {
border-top: thin solid #aaa
}

I found this solution across this link: https://productforums.google.com/forum/#!topic/chrome/r1neUxqo5Gc

I hope it helps

Consistent CSS border width with zoom

Most probably, this is a chrome-based browser bug, as the Firefox browser handles/renders it appropriately.

You could report the bug to the chrome team by using this bug report link

Consider making a media query for huge screens (e.g. more than 2k would have different border sizes).

@media screen and (min-width: 2560px) {
  table, table * {
    border: solid 1px black !important;
  }
  /* or */
  * {
    border: solid 1px black !important;
  }
}

You could change the min-width for your liking. Also, it is better to avoid using !important and specify one extra Specificity (class, tag name).

How to make sure the 1px border always show up regardless how much the user zoom in chrome (or any browser)?

The only solution I found (see here) that doesn't change the HTML is to use 'thin' instead of '1px' in the CSS. It seems to reliably make a 1px border.

Also, I was not able to replicate the issue with the codepen you shared so in case a future developer sees this and wants to replicate the problem this site consistently produces the bug (for me) when zoomed out.

Missing border after zooming page

First off Chrome 61, Firefox 52 ESR and IE 11 work with the following:

Math.round(window.devicePixelRatio * 100);

Secondly you're talking about a single pixel at a very aggressive level of zooming. In order to validate even having this concern to begin with you should collect the zoom statistics from your visitors first. There are so many more problems of incredibly larger magnitude to be concerned with that I highly recommend considering your priorities for your own sake.

Border Radius and Browser Zoom

The issue is that you are zoomed to 125% and Chrome is having issues with what's called "fractional pixels". This article covers the topic in-depth: https://www.simonbattersby.com/blog/browsers-and-fractional-pixels/ but a great callout is:

In this case Firefox and IE8 round the div width to the nearest whole
pixel, all the other tested browsers use the integer value only.

On a 1x monitor (where each pixel directly correlates to a single RGB lightsource) a browser can either display the pixel as a part of the blue circle "ON" or not a part of the blue circle "OFF". It looks like you're showing a 1x monitor demonstration in the video.

When a fractional pixel is < 0.5 it is "OFF" in a 1x scenario, and "ON" > 0.5. 2x Monitors can show greater density, and so this scenario is less common with them.

The issue will never go away, you will continue to see this behaviour when zoomed in or out in your browser. The rendering is atypical and skewed because you the user have chosen to view it that way, but for any other user using normal zoom - it will show as expected.

---

Related Topics