0

HTML:

<div>
  <button class="my-btn"></button>
</div>

CSS:

.my-btn {
    display: inline-block;
    height: 19.6px;
    width: 19.6px;
    border: none;
    border-radius: 5px;  
    background: url(https://www.svgrepo.com/show/21045/delete-button.svg) center no-repeat, #f99d1d; 
    background-size: 70%;  
}

So, I set an svg as a button background. I want this image to be centered, but the problem is that when the page is zoomed, the background image sometimes shifts ~1px to the left or right. It's like on certain zoom levels browser engine can't make the image be surrounded by equal number of pixels from both sides, and instead of:
|----5.5px---- background-image ----5.5px (or 5.4px)----|

it outputs:
|----6px---- background-image ----5px----|

The same happens with vertical axis.

Why does it work like that and how can I make my background image be centered at any zoom level?

Codepen of the example: https://codepen.io/recursion1/pen/JjZPbxO

Screenshot of what I mean by lateral shifting

Dmitry Saperov
  • 33
  • 1
  • 5
  • check some info here: https://stackoverflow.com/questions/15300163/how-do-browsers-deal-with-non-integer-values-for-height-and-width – Vladimir Oct 23 '22 at 20:44
  • @Vladimir, thank you. Very informative. So, as I understand, the problem is that on a certain zoom level the button's `width` is for example `30px` and the image itself is like `23px`. So, `3.5px` of free space should be from both sides. Pixels in our physical displays can't fire at half capacity (there are some technologies, but result of their work is mostly unpredictable), thus it won't be `3.5px` -- `23px` -- `3.5px`. Istead we'll got `4px` -- `23px` -- `3px`. Not sure, whether I understood it correcltly, but if I did, then there is no solution to the problem from my post. – Dmitry Saperov Oct 24 '22 at 16:18

0 Answers0