This is probably the first time I've come across a bug in Safari that's comparable in bizarreness to IE bugs.
The symptoms of this bug are that when you set the CSS
display property to
none the element doesn't appear. In fact, it has a height of zero.
Book nowModern Universal React with Next.js
Stop worrying about configuration, and complex codebases: Next.js makes SSR with React easy. Book your masterclass today.
The bug occurs when your hidden content is an inline element, containing
<br /> tags and proceeded by another inline element. It's tricky to explain, but can be seen in the source code of the example below:
The fix, after a lot of debugging, turned out to be simply to follow the inline element with a block element. Somehow the height in the first example is being set to zero allowing the inline
span to sit above the element. In the second example, the block element clears the newly displayed
span and it appears correctly.
It's pretty convoluted, which is why it reminds me a of an IE bug!