Problems with Apple-Safari and z-index ...

[erich.wanker]

Hi .. i want to give an UniContainerpanel the css ->  z-Index: 900000 !important;

and it works fine in chrome, edge, firefox, opera ... JUST Apple makes problems... 😞

(i treid a lot: .hauptmenu { translateZ(1000px) !important; -webkit-transform: translate3D(0,0,0) !important; transform: translate3D(0,0,0) !important; position: absolute !important;   z-index: 90000 !important;}');

• i made a testcase for this - if someone has a idea how to solve this

 

The paged Mainform has a UniContainerpanel (as Mainmenu) and a button -> UniForm1.showmodal 

 

Chrome shows the black UniContainerpanel correct over UniForm1

 

Safari ignores the css - and put the form over the black UniContainerpanel

if someone has a solution - what would be fine 😉

 

ThanX

 

Erich

 

testcase.zip

[irigsoft]

14 minutes ago, erich.wanker said:

and it works fine in chrome, edge, firefox, opera ... JUST Apple makes problems..

this is know issue on Safari: This should probably fix your issue on safari -webkit-transform:translate3d(0,0,0);

 

full example:
{
   -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    position: absolute;
    z-Index: 900000 !important;
}

https://stackoverflow.com/questions/40895387/z-index-not-working-on-safari-fine-on-firefox-and-chrome

https://ecomgraduates.com/blogs/news/fixing-z-index-issue-on-safari-browser

https://www.flowradar.com/answer/causes-of-z-index-issues-sticky-header-safari-webflow

[erich.wanker]

hi 🙂 ant thank you for your support

This doesnt help 

in the testcase i use  { translateZ(1000px) !important; -webkit-transform: translate3D(0,0,0) !important; transform: translate3D(0,0,0) !important; position: absolute !important;   z-index: 90000 !important;}');

[irigsoft]

5 minutes ago, erich.wanker said:

hi 🙂 ant thank you for your support

This doesnt help 

in the testcase i use  { translateZ(1000px) !important; -webkit-transform: translate3D(0,0,0) !important; transform: translate3D(0,0,0) !important; position: absolute !important;   z-index: 90000 !important;}');

Hi, what browser you use on mobile device, name and version can you tell me ?

[erich.wanker]

Hi .. i tested a lot different Safaris / different versions of OS / different devices iPad, iPhone . .

the problem is in every situation with an apple browser

[irigsoft]

2 hours ago, erich.wanker said:

Hi .. i tested a lot different Safaris / different versions of OS / different devices iPad, iPhone . .

the problem is in every situation with an apple browser

can you try to set : 

 position: relative 

based on: https://stackoverflow.com/questions/32033104/element-disappears-when-not-setting-opacity-0-99

 

try this : 

Method 3: Set opacity to 0.99
Setting the opacity of the element to 0.99 can also fix the z-index issue on Safari. This is because Safari treats an element with opacity less than 1 as a new stacking context. By setting the opacity of the element to 0.99, you can prevent it from overlapping with other elements.(15.03.2022 г.)

https://github.com/vaadin/vaadin-form-layout/issues/110#issuecomment-497676969

[Norm]

Hi Eric,

Putting the Safari issue  aside, I looked at your project and tried to understand what you are trying to achieve.

[erich.wanker]

Hello everyone and thank you for your support.

I have not been able to solve the problem with safari and give up.

I will change the logistics in my software - to work around the problem.

Norm: I want a parent main menu - that is always above any currently visible window.

I will now create many copies of this main menu to solve the problem.

Thank you very much
Eric