Streaming live at 10am (PST)

Odd overlap behaviour with transformed objects over menu

Hi everyone,

I’m sure there’s a workaround to this, and a reason why it’s happening, but I just can’t find it and I’d really appreciate some thoughts here.

I am working on our new site and have a mock-mobile browser displaying a client site which is giving us grief. This has a rotate and perspective transformation which seems to directly affect some layering; when viewing the site on my physical iPhone X it has a portion which overlaps the navigation menu (open or closed nav).

We’ve tried various nesting setups, checked and adjusted z-index parameters, but as far as I can see everything is configured as it should be. To back this theory up, it works as expected on Webflow preview and on desktop browsers for this resolution.

I can always remove the transformation for mobiles but I’d rather fix with the current design if possible.

I appreciate this one may be awkward to try and test a fix but here’s my read-only link anyway and if somebody could offer some clues I’d really appreciate it.

Thanks!

Screenshot of the issue:

20200519_092445000_iOS|230x500

Affected page: v2 Home

Staging URL: https://cursivecrew-f0f56351.webflow.io/v2-home

Read Only link: https://preview.webflow.com/preview/cursivecrew-f0f56351?utm_medium=preview_link&utm_source=dashboard&utm_content=cursivecrew-f0f56351&preview=068e5283dcfd0544a47afe68b3bb27c4&mode=preview

Bumping this up in the hope somebody would have some ideas…

Upon further checking, this appears to be only affecting all Safari browsers I have been able to check, not just iOS Safari. It’s actually a bigger issue on desktop too as more elements are sat above the menu.

Is this a bug in how Webflow presents this, or am I doing something that is known not to work properly in Safari?

Thanks

In case anybody ever has this issue, it seems it has been resolved by setting a perspective value to the parent wrapper container.

Honestly, I don’t really know why - but it does work.