Support Forums

App not rendering correctly on Safari (iOS)


I have an issue with my website when opened on Safari. It does not display one of the components, even though the functionality of the component is there (there are buttons I can click on and they trigger fine, the app just does not seem to render the component).

The app works locally and on Chrome with no other issues. I tried pretty much every CSS fix I could think of, but it does not seem like it is a CSS problem.

Here is a visual explanation:

Here is the url: https://mariabarbulescu.netlify.app/

That’s strange, your website loads just fine when I load it with safari (14.1.1). Have you tried clearing your cache / serviceworkers etc?

Even Maria? It is a very strange behavior, I tried it on two machines with Safari, on one some pages work and others do not, and on the other no page displays correctly.

All the pages, yes. Are there any errors in your console?

No, that is why I don’t really know how to approach this.

I can see a difference between the rendering of your page when comparing Chrome on Android and Safari on iOS. Also works fine on Safari iOS (iPad) when in landscape mode, but not in portrait.

So, it is a CSS thing.

On my iPad, only the About page renders correctly (even in landscape). I’ll dig more regarding the CSS, thanks for checking.

If you put the <div class="right-navbar"></div> component into the <div class="navbar-container"></div> component (instead of in the <div class="page-content"></div>), it will render on iOS (iPad) in portrait mode also. Some functionality (filters) don’t seem to work properly though.

I ended up putting the outside of any div and it works now, so it was indeed a CSS/layout issue. Thank you so much for the help!

1 Like