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.

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 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!

Want more?

Posts, web development learnings & insights, exclusive workshop and training discounts and more, direct to your inbox.

I won't send you any spam, and you can unsubscribe at any time. Powered by ConvertKit