CODEWITHSUNDEEP
htmlcssbrowser
Swquenzer
Swquenzer

Reputation: 35

Background isn't always applied to body

I've come across a possible css/browser bug that I can't quite figure out. Simply put, I have the following scenario set up:

.my-class {
  background: #66c28f; /* Old browsers */
  background: -moz-linear-gradient(left, #66c28f 0%, #0e9498 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #66c28f 0%,#0e9498 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #66c28f 0%,#0e9498 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66c28f', endColorstr='#0e9498',GradientType=1 ); /* IE6-9 */
}
<body class="my-class">
</body>

As you can see, there are multiple background properties added for backwards compatibility purposes. The problem is, when I have more than one background defined, sometimes nothing shows up at all. I'd say 1 out of every 3 times I load my page, the background doesn't show. It seems to be all or nothing. However, the second I resize the page, or select the body and toggle the background color on and off in developer tools, the colors show immediately (and yes, the styles show as working properly in developer tools- see screenshot below). I am using the most recent stable version of Chrome in my tests.

I am fairly certain it's not an issue with the body not having 100% height or anything like that. The stylesheet is also the last stylesheet in the head section. When I remove all but one background property, it works 100% of the time.

Any ideas why this would happen in a modern browser? Am I not allowed to provide fallback background styles?

The screenshot below shows the developer tools results when the background is not being displayed (but seems to be working properly in dev tools).

enter image description here

Note: This seems to be a similar issue as this 2009 post, but no explanation was given: background color doesn't always show up

Upvotes: 0

Views: 60

Answers (1)

MMJ
MMJ

Reputation: 309

Once i had a problem with this, but try to give height:100% to your <body> and <html> or sometimes try min-height:100% to your <body>. In this case try again with the following css code:

html, .my-class {
   height: 100%;
  background: #66c28f; /* Old browsers */
  background: -moz-linear-gradient(left, #66c28f 0%, #0e9498 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(left, #66c28f 0%,#0e9498 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to right, #66c28f 0%,#0e9498 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#66c28f', endColorstr='#0e9498',GradientType=1 ); /* IE6-9 */
}

Check this question to know more about this problem.

Upvotes: 1

Related Questions