Responsive object-fit: cover fix on Chrome

Question

I know there\'s others questions about this, but they are old and not updated with the browsers current support. And they not cover the Chrome particular problem with this.<

Answer 1

This is a Chrome rendering bug (per the Standard8's response). An alternative fix is to set a small border-radius ('0.5px' used to be the smallest value that works but I just tested in Chrome 65 and '0.1px' seems to work now) on the video element. This forces the element down a different (and apparently less buggy) rendering path within Chrome.

The advantage of this fix is that it doesn't require a "shrink-wrapped cropping element" around the video. The disadvantage is that cropping to a slightly rounded rectangle is probably slightly less performant than cropping to a rect.