Compatibility Safari 13

Hi @lucadiciaccio!

I could not find any issues causing Twenty Twenty-Three to behave incorrectly in Safari.

It might be the case that this inconsistency is caused by a plugin or something else.

Could you please share a link to your site to try and replicate this glitch from my end?

Thank you!

Thank You @mrfoxtalbot!

The link is https://www.ludik.it

It should be noted that the incompatibility occurs only with old versions of browsers (Safari 13.1.2 in macOs High Sierra 10.13.6, but it’s all ok with current Safari in updated macbook i tried, or same bad display problem in Internet Explorer but not in other updated browsers).

@lucadiciaccio Could you provide a screenshot of what the site looks like in Safari 13.1.2 and let me know what specifically is not looking right there?

https://snipboard.io/

Since Safari is now up to version 16, it’s very possible that Safari 13 does not support specific CSS properties that are used in your blocks, but this is just a theory until you can provide more details about the issues. Thanks!

This is a good tool to check what properties are supported in which browsers/versions: https://caniuse.com/

Screenshot on Safari 13:
https://snipboard.io/Z3EVXr.jpg

Screenshot on Chrome (here it appears as it should be!):
https://snipboard.io/KYeum6.jpg

Hi @lucadiciaccio – 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 it looks like this is the main issue causing things not to look right in Safari 13.

This is not an issue specific to the Twenty Twenty-Three 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.

Thank you!