Meta Stack Exchange is a question and answer site for meta-discussion of the Stack Exchange family of Q&A websites. It only takes a minute to sign up.
Sign up to join this community
This is how I see this review on Chrome:
It seems removal of spaces went outside of its area from the left side and looks like something was removed on the right side.
This is very confusing way to see what was actually change, unless you go to the rendered output.
Another example here.
I'm pretty sure this is a Chrome bug. In fact, I suspect it's related to this longstanding bug, as described in this SO thread.
Anyway, the answer by Han in that thread suggested a possible work-wround using :after pseudo-elements. I've tested it, and the following CSS hack seems to (more or less) fix the rendering:
/* kluge to avoid Chrome pre-wrap bug: http://meta.stackexchange.com/q/266258 */
.full-diff .diff-delete:after, .full-diff .diff-add:after {
content: '';
font-size: 0px;
}
(The font-size: 0px seems to be necessary; I have no idea why, but removing it makes the hack not work. In any case, we're dealing with a buggy rendering engine here, so there's no reason why any of this should necessarily make sense.)
The CSS hack described above should be safe and have no visible effect on other browsers, since the pseudo-elements it adds are completely empty. I have tested this on Firefox and confirmed that, indeed, there appears to be no visible difference with or without the hack.
And yes, this is going into the next release of SOUP.
span.diff-delete { white-space: pre }seems to fix this bug on Chromium, but triggers it (as, indeed, one would expect) on Firefox. I'm inclined to call this a Chrome bug.