Inline elements not collapsing whitespace before the end of the tag, in modern browsers?

Question

Example: http://jsfiddle.net/9e81ytwg/

<div>Foo <span> Bar </span> Baz</div>

*{font-size:30px;font-family:monospace}
span{background:red;}

Rendered in legacy browsers:

Rendered in modern browsers:

• BEFORE Bar there are TWO spaces, they get collapsed into ONE single space that appears WHITE
• AFTER Bar there are TWO spaces, they get collapsed into ONE single space that appears RED

why this difference? and why it's different from how it used to work just few months ago?

Is there a specific spec / point where the rendering changed? I'd have expected it working like it used to in legacy browsers. Or is it a bug?

Answer 1

http://www.w3.org/TR/CSS2/text.html#white-space-model (emphasis mine):

If 'white-space' is set to 'normal', 'nowrap', or 'pre-line'

1. every tab (U+0009) is converted to a space (U+0020)
2. any space (U+0020) following another space (U+0020) — even a space before the inline, if that space also has 'white-space' set to 'normal', 'nowrap' or 'pre-line' — is removed.

The behaviour you are seeing is therefore completely correct: all whitespace is collapsed from back to front, and therefore the preceding whitespace is not red (it collapsed into the 'space before the inline') and the trailing one is (as the other spaces collapse into it).

I have no clue which 'legacy browsers' you refer to but likely this was a bugfix in their engine somewhere along the way, as this has been in the standards like this for several years.

Update: the standards were not explicit on this back in 2008 when CSS2 was last updated, and it was explicit in the 2011 CSS 2.1 final drafts. Hence it's not really strange that browsers weren't uniform on how to handle this.