I have a pano playing in a div which is partially overlapped by another div on the page. I am using 'z-index' and 'position' within my CSS for this effect. Everything works well via the SWF player on the desktop, but fullscreen functionality does not work properly via the HTML5 player on the iPad. Adding 'position: relative' to the div that holds the pano is what causes the problem. Fullscreen works fine when 'position' is removed from the CSS, but then I can no longer use z-index for the layered effect.

I've uploaded a sample here: http://edgedesign.net/test/index.html (toggle fullscreen on both desktop and iPad to see problem)

Does anyone have any idea how I could solve this problem or another approach I should try??

Thx

Thanks for the reply Klaus.

I have updated my files to 1.0.8.14 and it did improve things, but doesn't totally solve my problem. Now the pano goes full screen on the iPad, but the one image still remains on top.

Making progress, but I may ultimately need to kill the graphic overlap.

PS: I didn't bother to update my XML or HTML when I updated. Any reason I should?

Doh! Just came up with a fantastic solution that should work well with how it's functioning now. I'll post a link once I'm a little further along with the project.

Although I was able to get the my div/graphic to remain above the pano (regular and full screen views) and it passed major browser tests (IE7+, Safari 2+, Firefox 3+, Chrome, etc.), I found that it still didn't function properly on some machines (including some of the passing browsers). Rather than fight with it anymore, I decided having my graphic overlap the pano wasn't the way to go. Instead, I down-sized the graphic and added some dynamic content to fill the space better.

Posted for anyone attempting a similar layout.