You are not logged in.

Html div in Krpano and z-index issue

jeromebg

Professional

  • "jeromebg" started this thread

Posts: 1,113

Location: Angers - France

Occupation: 360 experiences creator

  • Send private message

1

Tuesday, May 22nd 2018, 9:23pm

Html div in Krpano and z-index issue

Hi,
I create a html div in Krpano with javascript and one with krpano, my html div have no z-index set and the krpano one is 3001 by default.
It works on Firefox, Edge and IE11, but on Chrome the html div is always over the krpano one...

online exemple
Does someone knows why and if there is a workaround ?
THX !!!

benji33

Intermediate

Posts: 244

Location: France

Occupation: Senior Software engineer

  • Send private message

2

Wednesday, May 23rd 2018, 9:41am

You're right. Seems to be a Chrome issue. It's not the first time that Chrome doesn't respect the z-index for fixed and absolute positionned divs.

klaus.krpano

Administrator

Posts: 13,363

  • Send private message

3

Wednesday, May 23rd 2018, 9:48am

Hi,

that's a known Chrome bug that happens in the combination of using zIndex + CSS3D transforms (and krpano uses CSS3D transforms for faster rendering of the layers).

One workaround would be adding such style to the related html element:

Source code

 
1

style="transform:translateZ(1000000000000px)"


Btw - krpano will soon stop using any zIndex internally and sort the DOM elements instead. The zindex usage is still a relict from older times where this was necessary because of buggy CSS3D support from some browsers.

Best regards,
Klaus

jeromebg

Professional

  • "jeromebg" started this thread

Posts: 1,113

Location: Angers - France

Occupation: 360 experiences creator

  • Send private message

4

Wednesday, May 23rd 2018, 10:23am

Quoted from "klaus.krpano"

Hi,

that's a known Chrome bug that happens in the combination of using zIndex + CSS3D transforms (and krpano uses CSS3D transforms for faster rendering of the layers).

One workaround would be adding such style to the related html element:

Source code

 
1

style="transform:translateZ(1000000000000px)"


Btw - krpano will soon stop using any zIndex internally and sort the DOM elements instead. The zindex usage is still a relict from older times where this was necessary because of buggy CSS3D support from some browsers.

Best regards,
Klaus


Thanks Klaus but it doesn't seems to work ?
I added div.style.transform = "translateZ(1000000000000px)";
Exemple online updated

klaus.krpano

Administrator

Posts: 13,363

  • Send private message

5

Wednesday, May 23rd 2018, 10:41am

Try position:absolute instead of position:fixed

jeromebg

Professional

  • "jeromebg" started this thread

Posts: 1,113

Location: Angers - France

Occupation: 360 experiences creator

  • Send private message

6

Wednesday, May 23rd 2018, 10:44am

Quoted from "klaus.krpano"

Try position:absolute instead of position:fixed

Same thing, online exemple updated

klaus.krpano

Administrator

Posts: 13,363

  • Send private message

7

Wednesday, May 23rd 2018, 11:09am

Sorry, but thought you had already set a zIndex setting.

Just try adding that (with a value higher than ~4000), that should be enough due my tests (at least in the current browser versions).

Here a simple test case - click the polygonal hotspot:
https://krpano.com/examples/javascript3/

jeromebg

Professional

  • "jeromebg" started this thread

Posts: 1,113

Location: Angers - France

Occupation: 360 experiences creator

  • Send private message

8

Wednesday, May 23rd 2018, 11:14am

Quoted from "klaus.krpano"

Sorry, but thought you had already set a zIndex setting.

Just try adding that (with a value higher than ~4000), that should be enough due my tests (at least in the current browser versions).

Here a simple test case - click the polygonal hotspot:
https://krpano.com/examples/javascript3/


Think you misunderstood me, the problem is that in chrome html divs are always over krpano divs even with a smaller z-index, I don't want the html div to be over krpano divs with 3001 z-index value but under

klaus.krpano

Administrator

Posts: 13,363

  • Send private message

9

Wednesday, May 23rd 2018, 12:31pm

You mean you want custom div elements inside krpano - between the pano image and the layers?

That's not possible with elements added above the viewer. Therefore you would need add that element inside the krpano DOM element.

One possibility would be using a krpano container element and then adding the custom html elements to that (by using it's sprite variable),
for example:

Source code

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

<layer name="my_html_stuff" type="container" align="lefttop" width="100%" height="100%" 
        bgcapture="true" capture="false" handcursor="false" 
        onloaded="add_div();" 
        />
	
<action name="add_div" type="Javascript" ><![CDATA[

var div = document.createElement("div");

var title = document.createElement('h2');
title.innerHTML = "This is a html div";
div.appendChild(title);

var line = document.createElement('hr');
div.appendChild(line);

var linebreak = document.createElement('br');
div.appendChild(linebreak);

var content = document.createElement('p');
content.innerHTML = "This is a <a href='https://krpano.com'>link</a>...";
div.appendChild(content);

caller.sprite.appendChild(div);

]]></action>


This way you can also control that element from krpano, e.g. give it a size, toggle the visibility, sort/mix it with other elements and so on - add it works the same in all browsers.

Best regards,
Klaus

jeromebg

Professional

  • "jeromebg" started this thread

Posts: 1,113

Location: Angers - France

Occupation: 360 experiences creator

  • Send private message

10

Wednesday, May 23rd 2018, 12:42pm

Brilliant ! Many thnax !!! just what I needed ;)

jeromebg

Professional

  • "jeromebg" started this thread

Posts: 1,113

Location: Angers - France

Occupation: 360 experiences creator

  • Send private message

11

Wednesday, May 23rd 2018, 1:40pm

Last question ?
How to sent mouse events to that html div ?

klaus.krpano

Administrator

Posts: 13,363

  • Send private message

12

Wednesday, May 23rd 2018, 3:51pm

Quoted from "jeromebg"

How to sent mouse events to that html div ?

How do you mean that?

jeromebg

Professional

  • "jeromebg" started this thread

Posts: 1,113

Location: Angers - France

Occupation: 360 experiences creator

  • Send private message

13

Wednesday, May 23rd 2018, 4:40pm

Quoted from "klaus.krpano"

Quoted from "jeromebg"

How to sent mouse events to that html div ?

How do you mean that?

I mean that with mwheel:false I can scroll the content inside the html div, but then I can zoomin/out the pano.
And I can't change the mwheel value as it's an embed option right ?
So is there a workaroung to scroll the html content when mouse is hovering it and zoomin/out the pano otherwise ?
THX !

klaus.krpano

Administrator

Posts: 13,363

  • Send private message

14

Friday, May 25th 2018, 8:41am

Hi,

I've made now a full example for this - please see here:
Example: html div inside krpano with scrolling support

Best regards,
Klaus

jeromebg

Professional

  • "jeromebg" started this thread

Posts: 1,113

Location: Angers - France

Occupation: 360 experiences creator

  • Send private message

15

Friday, May 25th 2018, 9:24am

Lovely, THX !

jacksonL

Beginner

Posts: 1

  • Send private message

16

Monday, May 13th 2019, 9:07pm

Z-Index issue for floorplan plugin - not working on chrome

Hi there,

I need help with the panotour floorplan plugin overlapping everything in chrome browsers, despite modifying positioning and zindex values. I've done a lot of digging around and now I'm really going out on a limb for solutions - it appears that the floorplan plugin creates a div separate from the krpanoSWFObject div and could be the heart of the issue. It is working perfectly on all other browsers except chrome, which I cannot ignore. I've included a simple screenshot to show the layering of divs.

I've created a custom navbar and open/close button (to control the floorplan visibility) in the index_skin.xml file where the floorplan code can be found, and I need my custom assets to always be over top of the floorplan area. Adjusting z-index has no effect either in the xml file, nor in the browser editor window.

This is my first post so please let me know what else I can provide to help find a solution. Really appreciate any help I can get on this!

Thanks again,
Jackson
jacksonL has attached the following image:
  • firefox_EfZtWyXxpv.png

jang2620

Trainee

Posts: 38

  • Send private message

17

Tuesday, February 8th 2022, 7:55am

Quoted from "jeromebg"

Quoted from "klaus.krpano"

Hi,

that's a known Chrome bug that happens in the combination of using zIndex + CSS3D transforms (and krpano uses CSS3D transforms for faster rendering of the layers).

One workaround would be adding such style to the related html element:

Source code

 
1

style="transform:translateZ(1000000000000px)"


Btw - krpano will soon stop using any zIndex internally and sort the DOM elements instead. The zindex usage is still a relict from older times where this was necessary because of buggy CSS3D support from some browsers.

Best regards,
Klaus


Thanks Klaus but it doesn't seems to work ?
I added div.style.transform = "translateZ(1000000000000px)";
Exemple online updated

Quoted from "jeromebg"

Quoted from "klaus.krpano"

Hi,

that's a known Chrome bug that happens in the combination of using zIndex + CSS3D transforms (and krpano uses CSS3D transforms for faster rendering of the layers).

One workaround would be adding such style to the related html element:

Source code

 
1

style="transform:translateZ(1000000000000px)"


Btw - krpano will soon stop using any zIndex internally and sort the DOM elements instead. The zindex usage is still a relict from older times where this was necessary because of buggy CSS3D support from some browsers.

Best regards,
Klaus


Thanks Klaus but it doesn't seems to work ?
I added div.style.transform = "translateZ(1000000000000px)";
Exemple online updated
fixed?
:)

Similar threads