Search code examples
htmlcssvideosafari

Video briefly jumps around when page is loaded using Safari


Consider this very simple page with an embedded video:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Video test</title>
    <style>
        #container {
            width: 450px;
        }

        video {
            max-width: 624px;
            width: 100%;
            height: auto;
        }
    </style>
</head>

<body>
    <div id="container">
        <video playsinline muted loop autoplay src="/build/img/daily/home/dashboard.mp4" poster="/build/img/daily/home/dashboard-poster.jpg">
            Video not supported
        </video>
    </div>
</body>

</html>

Every time the page (re)loads, the video briefly jumps around:

Video jumps around

The issue can be seen in practice here.

Amongst others, I tried using background-image instead of poster, but that made it even worse.

I would highly appreciate some help here; thanks!


Solution

  • It appeared to be a bug in WebKit. (Mobile) Safari in macOS 16.1 and iOS 16.2 don't have this issue anymore.