Html background color prevents body background color/images from displaying full window #bug

[jongrover]

Issue described here: #188

Issue example at: http://jonathangrover.com/normalize-test/
Fixed issue at: http://jonathangrover.com/normalize-fix/

It was confusing one of my students when they applied a background color to their body and the html background was preventing it to display.
This issue is related to an issue specifically with HTML5 doctypes when declaring an html elements background property it interferes with the body elements background attributes. (See another example at: http://stackoverflow.com/questions/12125961/background-color-property-doesnt-work-correctly-with-html5-doctype )

This issue occurred for me on mac OSX 10.6.8 and 10.7.5 in Safari, Firefox, Opera, and Chrome.

To fix this I moved the background and color properties from the html element to the body element. This should still allow the background: #fff to override the system defaults because according to the W3C the html element will inherit its background and colors from the body. The nice thing about this change is that it is less confusing for beginners who can simply add background images and colors directly to the body which is most common. Also it will work in all browsers (as-is there is potential for the body background not to work correctly as seen in my example).

You can contact me at hello@jonathangrover.com or @jongrover

Thanks for a great css reset/style guide.

[mkantor]

Here are some browser screenshots of this. The leftmost is without using normalize.css at all (browser defaults), middle is current normalize.css with the issue, rightmost is with this pull request applied.

Chrome 26.0.1410.63

Firefox 20.0

Opera 12.15

IE 10.0.9200.16521

---

Personally I think this ought to be fixed unless there's a very good reason to stray from how most (all?) browsers behave by default.

[mkantor]

A notable regression for this is that a page that includes this fix which applies a background-color to the html element and doesn't set any background styles on the body element will behave differently than it does now (and differently from without normalize.css).

This can be worked around by either adding the style to body instead of html or with body { background-color: transparent; } or body { background-color: inherit; }. I guess the question is whether this is less surprising than the current behavior; I'm leaning towards yes.

[mkantor]

What happens if transparent or inherit is used instead of #fff in normalize.css here? Might that override the system color scheme with a white background too? I'm guessing no, but it might be worth investigating. It'd need lots of testing across all supported browsers/platforms, but if it works it's probably a better solution.

[necolas]

I've reverted the commit responsible for this.

What happens if transparent or inherit is used instead of #fff in normalize.css here? Might that override the system color scheme with a white background too?

Good question. Hopefully @andrejcremoznik can try it out and let us know.

[andrejcremoznik]

What happens if transparent or inherit is used instead of #fff in normalize.css here? Might that override the system >color scheme with a white background too?

Good question. Hopefully @andrejcremoznik can try it out and let us know.

Transparent or inherit on html doesn't make the background white. Interesting catch though, Just today I've had issues with conflicting html and body backgrounds. I agree with @jongrover that adding background: #fff and color: #000 on body is the optimal solution.