Tried using CSS :has() for a hover effect and it broke my whole layout in Safari

I spent like 4 hours last week working on a neat hover effect using the :has() selector. It worked perfectly in Chrome and Firefox, looked great. Then I opened it in Safari on my old Macbook and everything just shifted sideways like 200 pixels. The parent div lost its width completely and all the text wrapped weird. I guess :has() still isn't fully supported everywhere, at least not for complex stuff. Anyone else run into Safari breaking :has() based styles on real projects?

2 comments

2 Comments

simon_black7d ago

Yeah ended up wrapping the whole thing in a media query just for Safari...

lee_barnes707d ago

Did you try just turning off hardware acceleration first?