Safari 15.0 video element position fixed not working on page load

Question

dna2008 Author

Level 1

10 points

Safari 15.0 video element position fixed not working on page load

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?

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 but I thought I would ask just in case.

Posted on Oct 16, 2021 4:43 AM

Reply

Answer 1

dna2008 Author

Level 1

10 points

Oct 16, 2021 10:16 AM in response to Ronasara

Thanks for your reply. However, I'm a web developer and although your suggestion may work for me - I can't necessarily control what other people are going to do when they visit the sites that I have deployed similar code on. I can't control what browser they use or demand they follow some instructions to reinstall Safari.

I was trying to establish if this was a bug - if so I can only hope that this will be fixed in a more suitable way than following a possible solution that involves reinstalling Safari.

Thanks again for your feedback.

Reply

Answer 2

Nov 2, 2021 12:17 AM in response to dna2008

Would love a detailed breakdown on why this is happening and how to fix this, A lot of my buttons on old sites are blue (when they're not supposed to be) and my lazy load scripts aren't working :(

Reply

Answer 3

Ronasara

Level 6

15,519 points

Oct 16, 2021 9:54 AM in response to dna2008

There have recently been many reports of a broad range of new problems on this support site about the latest release of Safari v15. It is included in the downloads for Big Sur and Catalina. If you are experiencing these problems, you can use another browser such as Firefox or Chrome and they will work for you until a newer version of Safari is released.

I have read here that Apple's support people have a link to reinstall Safari and that doing so often fixes the problem. You might check with them.

Reply

Answer 4

Ronasara

Level 6

15,519 points

Oct 16, 2021 10:25 AM in response to dna2008

Yes, this is really a somewhat complex issue. I offer the following information which may shed some additional light on this issue. If someone is unable to access certain web sites and possibly getting a message that their browser must be updated, this is not an unusual situation. The reason is that web site engineers write their software to work with various browsers based on standardized specifications if they are to be compliant. Some web sites are not yet compliant. Also, some older browsers may not be fully compliant. One possible solution is to upgrade Safari or they can use another browser that does work such as Firefox or Chrome as I mentioned earlier. They can be individually updated as needed. It is important to know that Safari is installed as part of the operating system and it normally it cannot be individually updated. (Safari is periodically updated when the computer's operating system (OS) is updated or upgraded.) Finally, even if you are able to update Safari, there is no guarantee that it will be compatible with every web site. This is why many of us have more than one browser installed. Unfortunately, these are things that most of the public does not know. How to resolve? I don't know.

Reply

Answer 5

dna2008 Author

Level 1

10 points

Oct 16, 2021 12:31 PM in response to Ronasara

Thanks for your continued help/support on this matter.

As I mentioned, I "fixed" the issue using javascript but this isn't necessarily the best way of dealing with this - people may legitimately have javascript turned off and so a javascript fix is not going to help there.

I guess my main concern is whether I am mistaken in my assumption that this is a bug or whether my understanding of css/html is somehow not correct. It is a fairly simple piece of markup/code, so I can't really see how it would be the latter or not "compliant".

I can find no information on changes to the css standards that one is meant to use so unless someone has any information on that I can only assume it is the former and some kind of bug.

I'm afraid I am not really seeing any reason why or how I should consider the "upgrade" position - it just looks like an annoying issue that the Safari developers will either deal with or not deal with in a timely manner.

I can't be the only web designer/developer who has this issue - having a fixed position background video is not necessarily used that much but to me it is not that obscure that it can be shrugged off. So if I am right - it will be a bit of disappointment if it is not acknowledged and/or dealt with in a timely manner.

Reply

Safari 15.0 video element position fixed not working on page load

Similar questions