Today, I received a bug report about brackets being broken at some zoom levels in Chrome.

Well, actually the report was just, “bracket lines look rly f***** on my laptop.” (no kidding!) My first question was, “are you at 100% zoom?” The answer was, no, 80% zoom. Okay, brackets don’t work at 80% zoom. Maybe this is unfixable. Some complicated things just don’t work if you change the zoom level. I tried to reproduce and was unable to.

Then, just for fun, I zoomed out even more, and at 67% zoom I COULD reproduce! Interesting.

[3:51 PM] River: oh at 67% they are weird
[3:51 PM] River: oh huh ig they like, don’t fit ish
[3:51 PM] River: LOL they are
[3:51 PM] River: wait
[3:51 PM] River: omg
[3:52 PM] River: HAHAHAHAAHAHAHAHAAHA
[3:52 PM] River: HAHAAHAHAHAAHAHAHAHAHAAHAHAAHAHAAHAAH
[3:52 PM] River: ok
[3:52 PM] River: i fixed it

Remember how our brackets work? The lines are created in two parts, a ::before and an ::after. These two parts are placed next to each other in the bracket-line class. And, well, I guess at some nonstandard zoom levels, Chrome’s renderer makes the lines too big for the column, and wraps them. Hah!

Could I fix this with a white-space:nowrap?

1
2
3

.bracket-line {
    white-space: nowrap;
}

Yep, that fixed the issue. All better now!

Conclusion

• TIL white-space:nowrap; applies to ::before and ::after pseudoelements (really wasn’t sure if it was going to work at first when I tried it).
• Always ask someone what zoom level they’re at when you get a really strange bug report like this (but actually sometimes they’re unfixable).