8

I am having some strange issues with Safari 15.0.

I have put a jsfiddle test up here: https://jsfiddle.net/batdan420/3jrvgc2p/3/

You should hopefully be able to replicate the issue by visiting the url in Safari 15.0 and also see that it is not a problem on other modern browsers.

The issue seems to be to do with the video element starting out as position fixed.

This has worked on past versions of Safari (and other browsers) for many years but when I updated Safari, I found that the sites I am using the code on no longer displays the video when the page loads...

The above example should make it easier to diagnose/confirm the issue but if you want to see the code without going to the test here is the line of code that is causing the issue:

  <video style="left: 0;top: 0;height:100%;position:fixed;width: 100%;z-index: -20;" autoplay loop muted playsinline>
   <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
   </video>

I was able to fix the issue by REMOVING the position property from the css (that is currently inline for testing purposes) and THEN using javascript/jquery to set the css of the video element to position fixed AFTER the document is ready but this is not the most ideal solution.

The issue does NOT seem to happen on current versions of Chrome (94.0) or Firefox (93.0).

Perhaps there is something wrong with my code? or is this an issue with Safari 15.0?

7
  • Doesn't look like anyone else has this problem or has had the time to confirm if my issue is happening to them as well so I don't know for sure if this is indeed a bug, but I believe it might be. I guess sometimes what appears to be a bug turn out to be correct implementations of some obscure standard. It would be great if someone else could confirm what their feelings on the subject are.
    – BatDan420
    Oct 15, 2021 at 22:47
  • I can confirm the issue and stumbled upon the same solution before I read your question. Did you report it to the Webkit team?
    – Dominik
    Oct 16, 2021 at 20:28
  • I put up a similar question to the one I asked here on the Apple discussions board to see if anyone there had something sensible to say: discussions.apple.com/thread/253261371?page=1 So far as of this time I can't say anyone else has said anything useful there but glad to see someone else here at least can confirm the issue. Have you tested this on a separate Webkit browser that is running on a different OS - ie not specifically on Safari 15.0?
    – BatDan420
    Oct 16, 2021 at 21:39
  • Not tested it in another Webkit browser, no. But my current workaround does not longer need JS: position the video inside a wrapping element that does the positioning. I forked your JSFiddle as an example. Perhaps this helps.
    – Dominik
    Oct 17, 2021 at 23:33
  • I discovered this today as well. Video doesn't play if it has position:fixed set via CSS.
    – ffritz
    Oct 18, 2021 at 9:37

1 Answer 1

3

I just had the same issue with Safari desktop. The solution was just to put the video tag inside a wrapper which has the fixed position as Safari seems to be unable to handle it directly on a video tag.

This doesn't work in Safari:

<video style="position: fixed" src="..."></video>

This works:

<div style="position: fixed">
    <video src="..."></video>
</div>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.