Visual Issue when resizing in Safari

[bchah]

Hello @SangwonOh! I am back with more Apple Safari problems for you 😆

In OvenPlayer 0.10.31 and 0.10.32 there is a problem when the player window is resized in Safari browser. It appears to refresh like in the attached video where I reproduced the same problem from my application but on the OvenPlayer demo page:

https://github.com/AirenSoft/OvenPlayer/assets/33604674/adb4a257-1e40-4e7b-a830-e269ac6eb3f7

[SangwonOh]

@bchah Hi! I'll check it out soon!

[bchah]

Hi @SangwonOh this is still reproducible in all versions of Safari. Have you had a chance to look at it?

[SangwonOh]

@bchah Hi. Finally I checked this issue! 😂

First of all, the player you see on the page is not an ovenplayer. A player that uses the basic

When playing 4:3 ratio streams under the same conditions, the problem was not reproduced. However, what is unusual about this situation is that it is playing media that comes from an input device. web camera etc.

When the video player is resized, the browser can try to request and handle whatever resolution the input device can provide. This process will take some time and may cause this problem.

Now in my situation I can't simulate a 4:3 webcam. So please check two points.

1. Please check https://webrtc.github.io/samples/src/content/devices/input-output/ for the same issue. If so, this becomes a browser issue and is difficult to control.

2. Play the output stream using OvenPlayer demo and check if the problem occurs. If the problem does not occur, we can be sure that it is a problem that occurs when playing input devices.

[bchah]

Hi @SangwonOh thank you for having a look. What is your test environment where you are not seeing the issue with WebRTC playback? Sorry I may have confused things by demonstrating with an input device, but this is highly reproducible with WebRTC playback. I recorded this just now on the OvenPlayer demo page and we can see that the issue occurs whenever the player changes size:

https://github.com/AirenSoft/OvenPlayer/assets/33604674/b5ff22ba-c917-41d8-9706-556363ef62bd

[SangwonOh]

@bchah Thanks for retesting!! 👍

This issue only occurs on Safari 17 on macOS Sonoma. I think there is a bug related to object fit in Safari 17. Other communities are struggling with the same problem.

I tried a few glitches, but it doesn't work. I think it would be better to wait for Apple to update.

[bchah]

@SangwonOh I did some further testing and it is definitely an issue with Safari 17, but it is not exclusive to macOS Sonoma. I was able to reproduce it on any version of Safari 17 including iOS and iPadOS. Safari 16 and 15 both are fine (I brought out some old Macs to test).

I read about the object-fit problem in Safari 17 and some people have found solutions, either by using static values, or using JS instead of CSS to set certain parameters. However I noticed that the "object-fit" CSS property does not appear in the OvenPlayer code 🤔 Can you help me discover where in your code this is handled? I played with resize-sensor.js but that may not be it.

[SangwonOh]

Yes. This problem occurs in Safari 17.

HTML video elements use object-fit: contain by default. And the video element of OvenPlayer uses the default value.

I will try the methods you mentioned.

either by using static values, or using JS instead of CSS to set certain parameters.

If you have any more references, I would appreciate it if you could provide them.