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.
READER DISCOUNTSave $50 on terminal.training
I've published 38 videos for new developers, designers, UX, UI, product owners and anyone who needs to conquer the command line today.
$49 - only from this link
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:
View the demonstration of the bug
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!