Normalize body background #170

ProgerXP · 2013-03-26T14:21:10Z

Not sure if this issue is within normalize.css' idea but nevertheless. I suggest that body gets background: white because by default, or at least in Firefox it's transparent. This means it's filled with system-default color (clWindow?) which by default is white but depends on user's theme. I was surprised when a visitor sent me a screenshot with my design filled with gray instead of white which made the page look entirely different.

tharri · 2013-03-26T14:56:05Z

Was it Firefox 3? Normalize v2 no longer addresses issues with ancient browsers like FF3.

drgullin · 2013-03-26T15:33:44Z

Background of the body should probably be white. Just because it can be different for custom Windows color schemes.

ProgerXP · 2013-03-26T16:18:36Z

My bad, it wasn't Firefox but Opera (either 10 or 11). I couldn't reproduce it even after tweaking its settings. However, I could do the same thing with IE 8 (XP): change Display Properties > Appearance. Here's the test code:

<!DOCTYPE html>
<html>
  <head>
    <link href="http://necolas.github.com/normalize.css/2.1.0/normalize.css" rel="stylesheet">
  </head>
  <body>
  </body>
</html>

Here's the screenshot: http://i.imgur.com/cnWqymT.png

andrejcremoznik · 2013-03-28T22:28:32Z

I'd recommend the same also for form elements not just body. Thank you for addressing this.

necolas · 2013-03-28T22:32:43Z

I'd recommend the same also for form elements

Why? I don't make any changes without test cases and being able to assess the consequences of a change.

andrejcremoznik · 2013-03-28T23:13:40Z

Fair enough. Here's a fiddle with normalize loaded as an external resource: http://jsfiddle.net/dUftD/

I'm on Linux with KDE desktop using a dark color scheme.

Rekonq (webkit-qt browser) - my default:

Opera (12.14):

Firefox (19):

Chrome (25):

The results are all over the place.

Rekonq has black text, which is IMHO a browser bug, because it doesn't respect the system's scheme.
Firefox follows the system's color scheme, and is perfect. The problem is with web developers often setting a dark, non-black color for inputs and forgetting about background, leaving me with dark text on dark background.
Chrome doesn't respect the system default at all and therefore kind of amends for web dev's mistakes.
Opera is the same as Firefox and also suffers from the same problem

Maybe this isn't something for normalize to solve, because it's a problem with web developers not being aware of those issues. That's why I subbmitted the pull request to H5BP, because I believe it should apply downstream.

ProgerXP · 2013-03-29T07:06:52Z

Agree with @andrejcremoznik, I have seen the same problem with form elements (at least input, textarea and select). It looks sensible if we're normalizing body to black on white then we normalize other elements to black on white as well.

necolas · 2013-03-29T07:10:51Z

I'd rather add a background color to html. Does that also fix your problem @andrejcremoznik?

andrejcremoznik · 2013-03-29T20:58:55Z

I'd rather add a background color to html. Does that also fix your problem @andrejcremoznik?

Setting background on html does not affect form elements. Here's my test file: https://gist.github.com/andrejcremoznik/5273600

I'm seeing the same inconsistencies as with the fiddle above.

tomByrer · 2013-03-29T21:40:24Z

I assume that this will fix your issue @andrejcremoznik? Can you think of other sneaky wrong backgrounds? Glad you are testing things out!

button,
input,
select,
textarea {
    color: inherit; /* 1 */
}

necolas · 2013-03-29T21:57:35Z

@andrejcremoznik I'm not asking about the form elements, I mean the issue with the full page background color. Thanks.

necolas · 2013-03-29T21:58:29Z

Let's keep this issue focused on page background. There's already an issue about form text color inheritance. Thanks

andrejcremoznik · 2013-03-30T11:45:00Z

background alone on html is insufficient. For some reason Firefox applies a light text color to regular text. Adding color property, however, fixes all inconsistencies I could find.

necolas · 2013-03-30T17:23:12Z

All I want to know is if background on html fixes the whole-page background issue that is the subject of this ticket. Are you saying it does?

andrejcremoznik · 2013-03-30T23:35:34Z

Yes, it makes the background white everywhere.

But that alone does not solve the issue. Text color as well needs to be "normalized".

necolas · 2013-03-30T23:48:04Z

For some reason Firefox applies a light text color to regular text.

To what, form text? What element are you saying color needs to be normalized on?

andrejcremoznik · 2013-03-31T12:31:24Z

For some reason Firefox applies a light text color to regular text.

To what, form text? What element are you saying color needs to be normalized on?

I stopped talking about form elements 5 replies ago. Is my english that bad?

I'm saying you should do this:

html {
  ...
  color: black;
  background: white;
}

ProgerXP · 2013-03-31T12:37:26Z

@necolas, what's the problem with the solution suggested by @andrejcremoznik for html? And why not normalize form elements in this ticket as well if it's clear that browsers color them differently, as demonstrated? I don't understand the hassle.

tomByrer · 2013-03-31T15:10:03Z

To what, form text? What element are you saying color needs to be normalized on?

I stopped talking about form elements 5 replies ago. Is my English that bad?

I personally assumed you were still talking about form elements; you did not specifically say "the entire webpage". Nor do I see any screenshots that prove "For some reason Firefox applies a light text color to regular text."; I only see screenshots about forms.

Perhaps Firefox-Linux renders text differently than other Linux browsers? Here is a blog about Firefox-Windows anti-aliasing rendering changes that may give insight.

necolas · 2013-03-31T16:55:16Z

Please could I see a screenshot of the text color problem in Firefox: "For some reason Firefox applies a light text color to regular text." - I'd like to understand what this means and how it happens.

It would be great if you can also mention the version of Firefox, the OS, and whatever else it is that causes the issue. At the moment, due to some earlier confusion, I still don't have a clear picture of exactly is the text color problem and when it happens.

Thanks

why not normalize form elements in this ticket

Because that's a separate issue.

ProgerXP · 2013-03-31T18:16:51Z

Alright then. Same IE 8, same XP SP 3. Code from my second post (#170 (comment)).

Without normalization: http://i.imgur.com/g7qjbws.png

With normalization of html: http://i.imgur.com/bp1P0ee.png

Is this enough?

FagnerMartinsBrack · 2013-03-31T19:19:13Z

I have never heard of any user changing their background theme at the point of mess with a web page. The developer will never see this coming indeed.

I am impressed how just now this has brought into attention (it makes me think if this behavior is common enough for the need of normalization...)

andrejcremoznik · 2013-04-01T00:30:27Z

This is the test file I'm using: https://gist.github.com/andrejcremoznik/5273600

Firefox (html { background: white }):

Firefox (html { background: white; color: black }):

Firefox (without background and color):

As said before, I'm on linux, KDE, dark color scheme:

tomByrer · 2013-04-01T06:43:59Z

Great tests guys, thanks! Do my changes seem to work for you please? Direct-link minified, source

necolas · 2013-04-01T13:54:14Z

Thanks, that's helped clear things up a lot.

System color schemes (in particular, custom themes in Windows and Linux distros) affect Firefox, IE, and Opera. Normalizing the web site/app's root background and text color prevents these unwanted settings from being used. Chrome doesn't apply system-level schemes to websites. Fix gh-170

ProgerXP · 2013-04-14T08:34:08Z

My bad, it wasn't Firefox but Opera (either 10 or 11). I couldn't reproduce it even after tweaking its settings.

Just wanted to mention that I got this issue showing up in Opera 11.61 (turns out it applies appearance settings only after restart): http://i.imgur.com/olUlC8I.png using my earlier empty document (#170 (comment)). This is of course no more the case with 2.1.1.

System color schemes (in particular, custom themes in Windows and Linux distros) affect Firefox, IE, and Opera. Normalizing the web site/app's root background and text color prevents these unwanted settings from being used. Chrome doesn't apply system-level schemes to websites. Fix necolasgh-170

necolas mentioned this issue Mar 28, 2013

The web is broken because webdevs assume bg is always white h5bp/html5-boilerplate#1343

Closed

ProgerXP mentioned this issue Mar 31, 2013

Normalize form elements background #174

Closed

necolas closed this as completed in 9078909 Apr 1, 2013

mkantor mentioned this issue Apr 26, 2013

Prevents Body from Displaying Full Viewable Area = bad for repeating background textures in the body #188

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Normalize body background #170

Normalize body background #170

ProgerXP commented Mar 26, 2013

tharri commented Mar 26, 2013

drgullin commented Mar 26, 2013

ProgerXP commented Mar 26, 2013

andrejcremoznik commented Mar 28, 2013

necolas commented Mar 28, 2013

andrejcremoznik commented Mar 28, 2013

ProgerXP commented Mar 29, 2013

necolas commented Mar 29, 2013

andrejcremoznik commented Mar 29, 2013

tomByrer commented Mar 29, 2013

necolas commented Mar 29, 2013

necolas commented Mar 29, 2013

andrejcremoznik commented Mar 30, 2013

necolas commented Mar 30, 2013

andrejcremoznik commented Mar 30, 2013

necolas commented Mar 30, 2013

andrejcremoznik commented Mar 31, 2013

ProgerXP commented Mar 31, 2013

tomByrer commented Mar 31, 2013

necolas commented Mar 31, 2013

ProgerXP commented Mar 31, 2013

FagnerMartinsBrack commented Mar 31, 2013

andrejcremoznik commented Apr 1, 2013

tomByrer commented Apr 1, 2013

necolas commented Apr 1, 2013

ProgerXP commented Apr 14, 2013

Normalize body background #170

Normalize body background #170

Comments

ProgerXP commented Mar 26, 2013

tharri commented Mar 26, 2013

drgullin commented Mar 26, 2013

ProgerXP commented Mar 26, 2013

andrejcremoznik commented Mar 28, 2013

necolas commented Mar 28, 2013

andrejcremoznik commented Mar 28, 2013

ProgerXP commented Mar 29, 2013

necolas commented Mar 29, 2013

andrejcremoznik commented Mar 29, 2013

tomByrer commented Mar 29, 2013

necolas commented Mar 29, 2013

necolas commented Mar 29, 2013

andrejcremoznik commented Mar 30, 2013

necolas commented Mar 30, 2013

andrejcremoznik commented Mar 30, 2013

necolas commented Mar 30, 2013

andrejcremoznik commented Mar 31, 2013

ProgerXP commented Mar 31, 2013

tomByrer commented Mar 31, 2013

necolas commented Mar 31, 2013

ProgerXP commented Mar 31, 2013

FagnerMartinsBrack commented Mar 31, 2013

andrejcremoznik commented Apr 1, 2013

tomByrer commented Apr 1, 2013

necolas commented Apr 1, 2013

ProgerXP commented Apr 14, 2013