Twenty Twenty-Two Compatibility with Older Browsers

  • After setting up this site for a client, a test on various modern browsers (Chrome, Chrome Mobile, Firefox, Firefox Mobile, Safari, Safari Mobile, Edge) showed that, with the exception of font consistency which is still in progress, everything displayed consistently. However, this was not the case with a slightly older browser, Safari 13.1.3.

    When we deleted all of the custom CSS to diagnose if it was our responsibility, we found that the website was still displaying inconsistently, indicating that there may be something inherently problematic with the baseline theme.

    Margins were not displaying correctly and the padding is not being respected either. Is there anyone else that ran into this issue and any potential solution? Going into the code and overriding all the CSS references to margins and padding seems like a daunting task, at least at first glance.

    Thank you for any support offered!

    The page I need help with: [log in to see the link]

Viewing 1 replies (of 1 total)
  • Moderator Kathryn Presner

    (@zoonini)

    Hi @haleyassoc –

    As you can see here – https://caniuse.com/flexbox-gap – versions of Safari below 14.1 do not support the “gap” property “for flexbox containers to create gaps/gutters between flex items.” and this may cause certain elements not to look right in Safari 13.

    This is not an issue specific to the Twenty Twenty-Two theme. Rather, it relates to the way the editor controls spacing for many different blocks, relying on this specific CSS property that isn’t supported by older Safari versions.

    If supporting older versions of Safari is important to you, you could write some alternative CSS to work around it, which would avoid the gap property, or any other properties not supported by older versions of Safari. You can use this tool to check for CSS support in various browsers: https://caniuse.com/

Viewing 1 replies (of 1 total)
  • The topic ‘Twenty Twenty-Two Compatibility with Older Browsers’ is closed to new replies.