On , DEV Community member Dan Ott joined Christina and I on the pairing stream to work on a CSS issue related to Flexbox gap not being supported in Safari.
Here is the issue that we were working on:
`gap` doesn't work with `flex` on Safari #12452
Describe the bug
I've been living thinking that gap
(as well as grid-gap
) works perfectly fine with flex
elements. Today I learned it's not supported in Safari which means there's a missing whitespace in Safari which I have already confirmed testing few views.
That means we have to fix all instances of a combination of two utility classes flex
with gap-*
in our views (.html.erb
, .js
, .jsx
) AND also all instances of similar situation but in our SCSS files...
Yes, gap
does work with grid
but we should not simply replace every flex
instance with grid
because grid is for layout and flex is for components.
So in most cases we will have to remove gap
property and replace it with additional margin on child elements...
To Reproduce
Test our site in Safari.
Desktop (please complete the following information):
- Browser: Safari.
Smartphone (please complete the following information):
- Browser: Safari
On this stream, we covered:
- Replacing flexbox with CSS grid in certain areas of the site so that grid gap could be used
- CSS grid features
- How awesome CSS is
Thanks again for coming on the stream, Dan!
You can also find the three of us all over the web here:
Dan:
Nick:
Christina:
Virtual Coffee where Dan and I are members
Looking forward to seeing you on future streams! If you're interested in pairing, fill out this form. Weβd love to tackle an issue with you that the whole community could learn from!
P.S. Follow DEV on Twitch to be notified when future streams begin and catch old streams on YouTube
Top comments (0)