The player is overlapping everything in the app including popover cards on the webpage.

[lalit-tudip]

Description

What:

Issue

Since last week I've been facing an issue where my player video is overlapping everything and behaving weirdly. The video overlaps everything including the popover cards which are a part of the browser, which should not be overlapped.

Where:

This is only reproducible in MacOS Sonomo 14.2 and later and in Chrome. I checked on with same OS on Safari and it is working, I also checked on other OS(windows, Linux) in Chrome and it working as expected.

I found a similar issue #1192 but the solution didn't work for me.

.video-js .vjs-control-bar {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

Note: This is not an issue with my latest changes, I'm able to repro the same issue in our year-old builds, with the same OS and Chrome combo.

@gkatsev @mister-ben Could you please assist me on this?

Attachments:

Reduced test case

NA

Steps to reproduce

NA

Errors

No errors

What version of Video.js are you using?

7.21.4

Video.js plugins used.

"videojs-contrib-dash": "5.1.0", "videojs-contrib-eme": "3.9.0", "@videojs/http-streaming": "^2.8.0",

What browser(s) including version(s) does this occur with?

Mac Safari 17.3.1

What OS(es) and version(s) does this occur with?

Mac Sonoma 14.3.1

[mister-ben]

Please add a reduced test case

[lalit-tudip]

@mister-ben I can't share the URL and creds publicly, if you can share your ID, I can DM you.