Safari 12.1 bug

Hi there, my client has just encountered a bug with the site I just launched for them. It appears on their laptop which is running Mojave and Safari 12.1.1 - I’m on the latest OS and browser so I cannot emulate it.

Steps to reproduce in Safari 12.1.1:

  • navigate to Membership - coworking space The Fisheries and click the ‘details’ buttons over the image. The content doesn’t reveal, just white space. (its set up using an interaction on the button, which increases the height of the container from 0px to auto)

When clicking the details button a section of content normally slides open nicely and the image also becomes 100% width. Frustratingly, this issue half resolves itself as you continue using the page, and then comes back on page refresh.

https://preview.webflow.com/preview/fisheries?utm_medium=preview_link&utm_source=designer&utm_content=fisheries&preview=8a67c0ed0eca9ffc615aab4862282400&pageId=5f92ad0d10b49ffa19712fd7&mode=preview

Any ideas?

Hi @Brad_Leeming,

I think Safari doesn’t like auto. What happens if you change “auto” in your interaction for a defined pixel size ?
I personally gave up on Safari as there are numerous little subtleties that I don’t want to spend my life on. Where all the browser are fine, Safari always has its own alienated way to work.

I remember when grid was released, took me ages to realize I can’t set them as Auto here or there.

Hi @ColibriMedia I have actually managed to use a browser emulator, and I have noticed it isn’t actually the details button opening the content that is the issue at all. It is the whole image div which is not loading properly. Each of the three sections have a default webflow ‘fade in’ when scrolled into view animation set to them. They dont seem to be working, and then when you scroll all the way past them and back to the top of the page, the layout is broken (see attached) :exploding_head:

I found the solution. The divs use flex box. and these divs use the webflow fade in interactions. Apparently, animation and flexbox don’t mix in safari 12.1

I’ve had to turn this animation off now which is a shame. Would be good if you could specify in webflow for an animation to be ignored on certain browsers, to enable graceful degradation.