Why are comments overlapping the sidebar?

On one MSE question, the comments are overlapping the related questions sidebar. Is this something to do with the weird formatting of the first comment?

Browser: Mozilla/5.0 (Windows NT 6.0; rv:16.0) Gecko/20100101 Firefox/16.0

• I see this on Firefox indeed, and not on Chrome. You really want to include browser information in your report, as well as a link to the post. – Martijn Pieters Nov 6 '12 at 12:26
• This is due to the strike preventing work wrap. This is NOT real strike, those are unicode character combined. – ShaWiz Nov 6 '12 at 12:29
• @MartijnPieters Two words: time travel....shame on you. – Bart Nov 6 '12 at 12:30
• @Bart: I've erased all evidence it was my wrongdoing. If you have proof I'd love to eras^Wsee it! – Martijn Pieters Nov 6 '12 at 12:31
• @MartijnPieters. Thanks. Silly of me. Should have included that link to start with. – TRiG is Timothy Richard Green Nov 6 '12 at 12:32
• Ah, finally, I made it into a screenshot. – yannis Nov 6 '12 at 13:14
• Why have I received two votes on this in the past week? People are strange. – TRiG is Timothy Richard Green Feb 27 '16 at 23:10

Well, since comments won't allow the ordinary strike formatting, someone there tried (and succeeded!) to trick the system by combining Unicode characters resembling English letters with a strike through them.

This results in one long stream of characters without any blank space, no different than:

sincecommentswon'tallowtheordinary<strike>strike</strike>formattingsomeonetheretried(andsucceeded!)totrickthesystembycombiningunicodecharacters

Each browser handles such things in its own way; I don't think there's much to be done.

Just in case, here is the culprit string of characters:

P̶o̶s̶s̶i̶b̶l̶y̶ ̶[̶W̶e̶b̶ ̶A̶p̶p̶s̶]̶(̶h̶t̶t̶p̶:̶/̶/̶w̶e̶b̶a̶p̶p̶s̶.̶s̶t̶a̶c̶k̶e̶x̶c̶h̶a̶n̶g̶e̶.̶c̶o̶m̶/̶)‌​̶,̶ ̶b̶u̶t̶ ̶s̶i̶n̶c̶e̶ ̶w̶h̶a̶t̶ ̶y̶o̶u̶'̶r̶e̶ ̶a̶s̶k̶i̶n̶g̶ ̶f̶o̶r̶ ̶i̶s̶ ̶l̶i̶k̶e̶l̶y̶ ̶t̶o̶ ̶b̶e̶ ̶s̶a̶t̶i̶s̶f̶i̶e̶d̶ ̶b̶y̶ ̶a̶ ̶b̶r̶o̶w̶s̶e̶r̶ ̶p̶l̶u̶g̶i̶n̶ ̶o̶r̶ ̶p̶r̶o̶x̶y̶,̶ ̶I̶'̶d̶ ̶s̶a̶y̶ ̶t̶r̶y̶ ̶S̶U̶


If you run the above through an ASCII converter (this one was built from scratch just now, as I didn't find any decent converter online) you will see there is no blank space but rather a character with ASCII value 822 following each letter.

• Use the Basmala for maximum effect. Works on Firefox 42 Ubuntu 15.10: ﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽﷽ – Ciro Santilli 新疆改造中心996ICU六四事件 Nov 24 '15 at 11:50

This is a pretty common display bug that can be triggered in many ways: silly Unicode tricks, long code blocks, broken MathJax, missing MathJax delimiters, changing the font size in Chrome or in Firefox, etc. It was first reported a long time ago, and a server-side kluge was added to "fix" it (occasionally breaking code embedded in comments or very long URLs as a side effect), but it didn't really solve the problem completely.

The common thread in all these bug reports is that they involve some kind of an over-wide unbreakable block of text in a comment, which causes the table that contains the comments to extend to accommodate it, overflowing out of the main content area and into the sidebar.

There's a simple CSS fix that (mostly) solves this bug: just set an explicit max-width on the comment text cells:

.comment-body {
max-width: 628px;
padding-right: 2px; /* kluge to avoid occasional spurious scroll bars on Chrome */
overflow: auto;
overflow-y: hidden;
word-wrap: break-word;
}


This will cause any over-wide comments to stay within their prescribed bounds, breaking long words if necessary, and acquiring a horizontal scroll bar if even that doesn't help, like this:

(The padding-right: 2px kluge is a workaround for what appears to be an uncommon Chrome bug causing the horizontal scroll bar to appear even for comments that are not over-wide. Basically, Chrome's layout algorithm seems to sometimes mis-estimate how wide the table cell should be, and ends up making it one or two pixels too narrow; the extra padding appears to give it enough slack to accommodate such mistakes.)

Ps. This fix is include in the latest version (v1.22) of the Stack Overflow Unofficial Patch user script. (Earlier versions had a slightly different fix, which used table-layout: fixed instead.) The word-wrap: break-word feature will be added in SOUP v1.30. (It's already present in the v1.29 devel branch.)

• Wow, didn't know this issue has such a long history... – 3 to 5 business days Sep 25 '14 at 23:23