Discontinuity Between Safari and Chrome

Design help General
1

Hello Webflow Forum!

Currently building my virtual art gallery website on this platform, and have found Webflow and incredible and invaluable tool to do it.

But for one of my pages, Safari is really mucking up the page when it loads, although both the preview on Webflow and loading on Chrome and Firefox work seamlessly.

Let me show you. Here is how the page is supposed to look, working here on Chrome:

50
503360×1692 1.67 MB

But this is how Safari renders the page:

59
593360×1786 1.89 MB

Three things go wrong here:

  1. Most obviously, the “DaVinci Background” is transported to the foreground, even though it’s z index is at 1 and the main wall and frame “Room DaVinci” is at z index 2. Safari is also brutally chopping off the bottom left corner of the image.
  2. The “Artist Title DaVinci” and “Artist Shadow DaVinci” have been removed for some reason.
  3. On the right-hand side, The Virgin of the Rocks has flipped places with its shadow.

I think that there is some issue with interactions that is messing this up, because if I remove both of the “Dynamic Title Davinci” Move Mouse in Viewport Page Triggers, then things improve. I can’t find a solution which keeps these much needed interactions though.

I don’t get this issue with any of my other pages, even though my interactions across the whole website are similar to the ones on this page. I’ve rebuilt this webpage from scratch today with no change or success.

I dearly hope someone could help me out with this!

Many thanks,
Yaz

Here is my site Read-Only: Pictures Of Paintings (go to the “Leonardo Da Vinci” page)
And here is the published webpage link: Da Vinci

2

Hey YazAsh,

First, let me say that I think this site is really awesome I like it a lot. Second, I have had an almost identical problem where I had z-indexing, transform properties like skew, having an image peek through a frame, and having interactions on those elements. I was also using display: flex on some of those elements. My solution, as strange as it was, was simply to give a width value to all the elements that were using flex as well as giving a width to the wrapper that the elements were in. I think your wrapper is scene-holder-davinci. I know it sounds like it wouldn’t work and it might not but that’s what helped me with my issue which I spent hours and hours trying to figure out.

Let me know what happens!
Ryan