Flexbox gap workaround for Safari on iOS 14, 13 and lower

How to create a correct CSS @supports at-role to eliminate visual inconsistencies between browsers

Photo by Raagesh C on Unsplash

tl;dr:

@supports (-webkit-touch-callout: none) and (not(translate: none))

Support tables for flex-gap and grid-gap respectively
Support tables for flex-gap and grid-gap respectively
source: https://developer.mozilla.org/en-US/docs/Web/CSS/gap
Support table for the webkit property
Support table for the webkit property
source: https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-touch-callout
Release notes for Safari 14.1 — info about flex-gap being supported from now on
Release notes for Safari 14.1 — info about flex-gap being supported from now on
source: https://developer.apple.com/documentation/safari-release-notes/safari-14_1-release-notes
Browser compatibility for translate
Browser compatibility for translate
source: https://developer.mozilla.org/en-US/docs/Web/CSS/translate
To play with the example, fork https://codesandbox.io/s/styled-components-forked-udwqk?file=/index.js
Gap applied correctly on a Samsung device that uses Chrome
Gap applied correctly on a Samsung device that uses Chrome
Chrome on Galaxy S20 interprets gap correctly
Gap not applied correctly on iPhone
Gap not applied correctly on iPhone
Screenshot of Safari on iPhone, this time displaying the gaps correctly
Screenshot of Safari on iPhone, this time displaying the gaps correctly
Screenshot of the styles part of developer tools, proving that the additional styling was applied
Screenshot of the styles part of developer tools, proving that the additional styling was applied
The styles shown above are not present this time in the styles tab
The styles shown above are not present this time in the styles tab

Fullstack Developer @ Grupa Pracuj. I’m all about React, travelling, foreign languages and photography.