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 block from none the element doesn't appear. In fact, it has a height of zero.
UK EVENTAttend ffconf.org 2024
The conference for people who are passionate about the web. 8 amazing speakers with real human interaction and content you can't just read in a blog post or watch on a tiktok!
£249+VAT - reserve your place today
The bug only happens in a specific markup situation, as such I've never seen it before now - but it's worth being aware of since debugging the issue would normally start in the JavaScript, when in fact it's Webkit that's the problem.
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!