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: https://www.jackalope.tech/what-ive-learned-sculpting-in-virtual-reality%E2%80%8A-%E2%80%8Aoculus-medium/

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?


#2

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

fullscreen-ancestor:not(iframe) nav.navbar { 
    display:none; 
}