-
Quick CSS tip: If you have an image that's composited on a separate layer (because you usedPermalink On twitter.com
transform, for example), you may get a light border on the image [1]. The solution: backface-visibility: hidden; [1] This happens in Chrome, haven't tested Firefox and Safari yet.
♻️ 1 Retweets ❤️ 5 Favorites Mood +1 🙂
-
I think it's a combination of: 1) the image not being rendered 1:1, so for example I have a 960px image that is rendered at 640px. 2) transform or other css property causing the image to be get a separate gpu layerOn twitter.com
-
Example: (Input image = 960px wide)Permalink On twitter.com
css img { width: 640px; height: auto; aspect-ratio: 16/9; object-fit: cover; transform: 0 16px; backface-visibility: hidden; }