Safari display issues

Hi everyone,

I’m currently running tests to prepare for the launch of a portal, and I’ve noticed some display issues specifically in Safari.

What’s the best way to handle these kinds of issues? Any tips or recommended approaches would be greatly appreciated!

@Joyce is it a normal behaviour?

In Safari:

Thanks for your help.

Hi @Davy

Could you please DM me the project so I can take a look?

1 Like

Just did, thank you! @danlopes

Hello @Davy

Sorry, but we can’t find any issues on Safari. It’s displaying the same results as in all other browsers. WeWeb applications’ layouts are not affected by browsers. I’d recommend maybe updating your Safari version.

Thank you for your feedback. Can you let me know your safari Version so I can compare with mine?

I have similar issues with Safari -

On Safari

Project is prepzo.co

On Chrome

@Joyce , do you happen to have a fix for such issues? A video explaining this would be great too

Hello @abhi-ziellab

Is your Safari up to date?

Hello, there are several important differences in how Safari (WebKit) renders pages compared to Chromium-based browsers. Here are the key differences you should be aware of:

1. CSS Grid and Flexbox Implementation

  • Safari has some unique behaviors with CSS Grid auto-placement and gap properties
  • Flexbox wrapping can sometimes behave differently, especially with complex nested layouts

2. CSS Features Support

  • Safari is often slower to adopt newer CSS features

3. Form Elements

  • Form controls like date pickers, select elements, and input types have different default styling
  • Safari’s date inputs don’t support the same level of customization as Chromium
  • Select elements in Safari can behave differently with z-index stacking

4. Media Features

  • Video and audio playback APIs have some Safari-specific implementations
  • Auto-play policies are stricter in Safari
  • WebM format support is limited in Safari

5. Performance and Memory

  • Safari handles large DOM trees differently
  • Memory management for canvas elements can vary
  • Animation performance might require different optimization strategies

6. Touch and Gesture Support

  • Safari on iOS has unique requirements for touch events
  • Momentum scrolling behaves differently
  • Some gesture events are Safari-specific

7. JavaScript APIs

  • Some Web APIs have delayed implementation in Safari
  • Certain features might require vendor prefixes or different syntax
  • WebWorker implementation details can vary

To handle these differences effectively:

  1. Always test your web apps in Safari during development
  2. Implement fallbacks for critical features that might not be supported

When in doubt, you can check specific feature support across browsers using resources like caniuse.com or MDN’s compatibility tables.