Confirmed. Specific to Safari.

Adding z-index: 1000 to this SCSS block https://github.com/joomla/joomla-cms/blob/4.0.0-beta/build/media_source/system/scss/fields/switcher.scss#L90 seems to "solve" the problem. But given no SCSS in our entire tree has z-index values of 999 I kinda don't believe it's a real solution and it's some sort of mask. Also given bootstrap's dropdowns start with a z-index of 1000 we might set ourselves up for failure on pages with a switcher element and dropdown in close proximity.

Maybe @ciar4n is this one you are able to help with? Dunno if you actually have a safari install available to you

But why do some look and work ok and not others on the same tab/page? Surely that’s the key?

This happens all throughout the admin console in safari - not just this example page - some work some don’t

Sent from my iPhone

On 2 Jun 2020, at 00:08, George Wilson notifications@github.com wrote:


Adding z-index: 1000 to this SCSS block https://github.com/joomla/joomla-cms/blob/4.0.0-beta/build/media_source/system/scss/fields/switcher.scss#L90 seems to "solve" the problem. But given no SCSS in our entire tree has z-index values of 999 I kinda don't believe it's a real solution and it's some sort of mask. Also given bootstrap's dropdowns start with a z-index of 1000 we might set ourselves up for failure on pages with a switcher element and dropdown in close proximity.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or unsubscribe.

Also as you can see hover and toggling can make visual changes of OTHER toggles on the same page - surely they should be totally independent?

Sent from my iPhone

On 2 Jun 2020, at 00:14, George Wilson notifications@github.com wrote:


Maybe @ciar4n is this one you are able to help with? Dunno if you actually have a safari install available to you

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub, or unsubscribe.

As far as I can tell it's any switcher element that's not in the first column of flex columns. They definitely should be independent. The switchers are entirely CSS driven though (there's no JS) - so it has to be some sort of browser bug (which is also why things work in firefox and chrome)

I still think this is a release blocker. No idea why this was modified.

Maybe @ciar4n is this one you are able to help with? Dunno if you actually have a safari install available to you

I'm running Windows so sorry to say I dont have Safari available to me.

Going by the screenshot, the issue only appears to happen to items in the second column? If so this may imply that...

... is not been applied in Safari. To confirm does removing the column-count-md-2 column-count-lg-3 classes from the container of these fields resolve the issue?

The problem is overflow: hidden; for .switcher .toggle-outside

Sorry, I can't help you so. This issue been caused by overflow: hidden; makes no sense to me and I don't have a mac to test.

it's a known problem in Safari with overflow hidden
https://devdojo.com/tnylea/safari-overflow-hidden-problem

Alas here we can't use the trick as position is absolute

https://forum.webflow.com/t/overflow-hidden-round-corners-not-working-on-safari/67805/2

Looks like I found the solution

  overflow: hidden;
  -webkit-mask-image: -webkit-radial-gradient(white, black); // adding this

Making PR now

Clsing as we have a patch. Please test #30420

I applied # 30420 but still get the same result.

1. test results should be done in the pr
2. patchtester is not enough. One needs to use npm to apply the modified scss to the css