Eugene Garbuzov Eugene Garbuzov - 1 year ago 64
CSS Question

How to fix incorrect element size on browser scaling?

Consider we have a 72x100px PNG image which is called pic.png. Its left half is yellow and the right half is black.

Then we have a web page with an element

<i class="picture"></i>
with the following CSS:

.picture {
background-image: url('pic.png');
background-position: 0 36px;
display: inline-block;
height: 36px;
width: 36px;

If I open this page in Chrome 50 or Opera 37 and set the scaling to 33%, 67% or 90%, I will see a 1px black stripe at the right part of the element. The screen resolution is 1920x1080.

How can we fix this issue so that the element is always yellow in any scale in any browser?

By now I know that if I set width to 35.5px, the black stripe will be seen only when the scale is 67%.

Answer Source

Try adding this and see if it solves the problem...

display: inline-table;