flipped image is 1px too high

[Quinten0508]

Some images, such as 4.png, are 1px too high when flipped horizontally, but appears fine when not flipped.

Flipped image (left and right) and normal image (middle).

More examples:

[ryantanrk]

this can be fixed by setting top to 1px when flipped, but it feels more like a hack to me. not sure if there's any better solution

[Quinten0508]

Did some more poking around. Here's another regular youtube homepage with the flipped mrbeast image being 1px too high:

The yt-core-image--fill-parent-height class (applied to yt-image, the thumbnail itself), adjusts the image height from 201.983 to 202.483, making the image exactly 0.5px taller. However, the mrbeast image already has this new height. The dimensions of the youtube thumbnail and the mrbeast overlay image are exactly the same, yet in the browser the thumbnail is taller than the mrbeast image. Could be a rounding error? This is beyond me though.

I've replaced the mrbeast image with a 1280x720 black square (https://i.imgur.com/O8QSi3z.png) and applying top: 1px would be "incorrect". You'll get the same 1px gap, but now on the top of the thumbnail. Replaced image:

Replaced image with top: 1px:

Other finds:

• cannot reproduce this on chromium.
• making the browser window smaller (from 2560x1440 to e.g. 1920x1080) also fixes the issue.

[MagicJinn]

Personally I am able to reproduce it on Chromium. I truly have no clue what could be causing this to occur, but I'll continue to investigate.