Sketchfab Forum

Problems with embed and -webkit-full-screen-ancestor:not(iframe) pseudo class selector?

(Thedonquixotic) #1

I'm trying to do an embed on my personal website with the sketchfab embed and I'm running into some problems in fullscreen mode.

Here's a link to the website:

When I fullscreen the embed my navbar is visible. This is because the user agent stylesheet (the default css stylesheet used by Chrome) has a selector called :-webkit-full-screen-ancestor:not(iframe) which is styled to make everything disappear behind the fullscreened embed.

The problem is that this selector seems to only count up until it hits the point a certain number of ancestor elements, or at least so it appears. When it gets up to the navbar it stops applying the fullscreen-ancestor effects and because of that it keeps the navbar visible over the sketchfab embeds. I'm not really sure why this is happening though? What can I do to have the sketchfab embed appear properly in fullscreen mode without my navbar interfering?


Just saw your email. Looks like you solved it by using:

fullscreen-ancestor:not(iframe) nav.navbar {