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.
MY WORKSHOPMaster Next.js
Everything you need to master universal React with Next.js in a single intense master class. Includes full pass to ffconf, the web developer conf.
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!