You are not logged in.

1

Wednesday, May 7th 2014, 12:09pm

HTML5 Fullscreen + css overlay

Hi,

I'm working on a krpano-instance which runs 'fullscreen' (100% width, 100% height) in the browserwindow.
The JS-interaction between krpano and my HTML/CSS/JS works like a charm.
When the native browser-fullscreen-mode is active, all those interactions still work but the z-index is causing several issues.

The z-index of the pano gets automatically set to the maximum 2147483648 webkit-index (just for now I'm testing webkit only).
Is there any way to get the native browser CSS overridden by a lower z-index so I can provide a larger one to my custom overlay?

I already tried by adding a JS eventlistener on the fullscreenmode and trying to set the z-index dynamically, but without any positive result.
jQuery-example of what I tried to do with the listener:

Source code

1
2
3
4
$(document).on('webkitfullscreenchange mozfullscreenchange fullscreenchange', function(e) {	
	$("#myoverlay").css({zIndex: "99 !important"});	
	$('#mypano, #krpanoSWFObject *').css({zIndex: "5 !important"});
});

Has anyone encountered a similar problem? If so, is there any way to get around it?

Thank you in advance for any help you can provide.

2

Wednesday, May 14th 2014, 10:57am

Hi,
The z-index of the pano gets automatically set to the maximum 2147483648 webkit-index (just for now I'm testing webkit only).
Why that?
Normally no zindex was used by krpano...

Or do means CSS3D overlaying problems in Chrome?
Chrome is buggy when it comes to event handling of CSS3D transforms elements, here added styles like 'translateZ(+2000000000000px)' can help.

Best regards,
Klaus

3

Thursday, May 15th 2014, 1:54pm

Great! translateZ dit the thing.
Everything works fine now!

Thank you very much!