DUPLICATE: Website broken on ipad 2021 IOS 16.3.1

Bugs
1

Bricks version: 1.9.5
Browser: Chrome, Safari
OS: IOS 16.3.1
URL: https://www.ocean-sherpa.com

IMG-20240122-WA0001
IMG-20240122-WA0001900×1600 118 KB

Hi,
I have a website that is not displaying well on een 2021 ipad ios 16.3.1 (tested similar devices). Does anyone know what is going on. The client tested is in chrome and safari on the same device. Both resulted in the above photo.

2

Hi,
I have tested the page on my devices:

  • iPad Pro iOS 16.7.2 > Everything ok!
  • iPad iOS 15.7.1 > Error as in your screenshot
  • Safari 16.6 on macOS Ventura (13.5.2) > Everything ok!

PS: Chrome on iOS / iPadOS uses the same Webkit engine as Safari.

Don’t you want to update your iOS version to 16.7.2?
But I’m still amazed that this small version difference doesn’t show any errors for me.

If you get stuck, I would recommend building a test page and gradually disabling elements or, conversely, adding elements and testing each state again in Safari.

PS: On around 1024px your logo gets very tiny:
screenshot-ocean-sherpa.com

3

Thank you very much for testing. We are going to advice to the client to update.

4

Hi @enssan,

Welcome to the forum :slight_smile:

Yeah, this is one of those tricky issues we have with backward compatibility due to using the :where() pseudo-class. This was also reported here and is currently marked as a work in progress to figure out the best way moving forward: WIP: Nav Menu flexbox issues in older browsers - #12 by harryb.

I’m closing this thread just so we can all have one thread to follow this.