css - Why does Chrome cause this border / bleed around this image when using translate? -


see fiddle:

https://jsfiddle.net/uy6yhv4d/1/

i have img background-color: red set.

when rendered on page normally, without using transform, appears expected, no red border.

however, when trasform: translate positioning, red background "bleeds" edges, causing red border appear.

why happen?

the red border coming background-color: red;. found removing point values dimensions removed appearance of red border:

img {   height: 256px;   width: 200px;   position: absolute;   left: 50%;   top: 50%;   transform: translate(-50%, -50%);   background-color: red; } 

Comments

Popular posts from this blog

Is there a better way to structure post methods in Class Based Views -

reflection - How to access the object-members of an object declaration in kotlin -

php - Doctrine Query Builder Error on Join: [Syntax Error] line 0, col 87: Error: Expected Literal, got 'JOIN' -