search

mpetroff / pannellum

Pannellum is a lightweight, free, and open source panorama viewer for the web.
https://pannellum.org/
MIT License
4.24k stars 722 forks source link

z-index problem in fullscreen #520

Closed jimblue closed 1 year ago

jimblue commented 6 years ago

Hi there!

First thanks for your nice plugin, I've tested all of panorama plugin and yours is from far number one!

I can't say my problem is a bug as your demo don't have it... but you'll probably be able to help me out.

As explain in the title I'm having issue configuring z-index on full screen. Even if I change the css to give pannellum container the higher z-index, some element of my design still show up on top of the panorama.

Hope you have a solution or maybe a hint.

Cheers

MmmDee commented 6 years ago

Great photography and website Jim. I didn't see any evidence of the problem you describe; however, I did note losing the ability to pan the image when in full screen mode. I'm using Chrome 63.0.3239.84 on Linux Mint 18.2.

This is the only message I see on the Developer's console:

Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('link-deleted.com'). f.C @ www-widgetapi.js:114

Full screen works as expected on Firefox 57.0.1 (64-bit), same OS, no artifacts, no console messages.

Edit: Just noticed, using Chrome and going to full screen, there's an overlay containing title and bouncing pointer. Clicking the bouncing pointer lifts the overlay and allows me to pan the full screen. That behavior is not seen on Firefox, meaning no overlay going to full screen on Firefox.

Edit2: Link to production website deleted per @jimblue.

jimblue commented 6 years ago

Hello @MmmDee !

Thank you for your comment 😄 !

The overlay you notice on chrome is the overlay of the landing fullscreen video... I don't understand how pannellum fullscreen works as even if I change the z-index of pannellum to be superior to this overlay it's always visible... (you can try from the console)

In safari it's even worst as pannellum doesn't show up on full screen!

MmmDee commented 6 years ago

@jimblue

Deleted the link per your request. It appears Firefox works as you intend, but Safari and Chrome (latest version on Linux) do not. Safari on an iPhone 8+with IOS 11.1.1 shows the "small" pan-able image, but as you've stated, it won't switch to full-screen.

Arrgh, I haven't updated a website I manage in a couple years... didn't realize there was an IOS problem with my implementation of Pannellum (the version it uses is quite old by development standards). Now I'm prompted to fix it.

Again, great website, good luck to you.

strarsis commented 6 years ago

Please note that for z-index having any effect the element must be either positioned absolute or relative. z-index is ignored for defaut position: static.

mpetroff commented 6 years ago

I'm closing this issue since there's no link for me to look at.

jimblue commented 6 years ago

@strarsis yes I use absolute position and z-index... Still it doesn't seems to have effect.

mpetroff commented 6 years ago

This appears to be a bug in Chrome itself. I can make other elements on the page that don't have Pannellum fullscreen and still show the issue, e.g. open the lightbox for one of the videos and run document.querySelector('.project-wrapper').webkitRequestFullScreen() in the browser console. I found something that suggests it might have to do with the CSS animation: https://stackoverflow.com/questions/44321110/youtube-full-screen-video-behind-html-content