Chrome Display Cuts Contact Overlay Background

HTML & CSS
1

Interesting how Chrome displays this page’s Contact page. The first load, there’s a gray background that partially covers behind the form. Then the next time, there’s a completely gray color background, but then the semi-transparency kicks in. The idea is there is suppose to be a semi-transparent color overlaying the background map image. Firefox and IE seem to be displaying it accurately.

I’m suspecting that it’s my use of html,body {height: 100%} that’s causing it. So if that’s the case, I need to find a way to have my header full height if I can’t use html, body {height: 100%}, which I’ve seen used.

Suggestion?

2

Try adding overflow:hidden to this class: “blog-featured”.

.blog-featured{overflow:hidden;}
3

Thanks for the reply, lauren_olsen17, but that didn’t seem to fix the issue.

4

I find that background-attachment: fixed often causes more trouble than it’s worth. Seem to be causing problems here, so I’d just remove it.

5

If this is an issue then you can always try using the vh unit which will give you the 100% height but is only supported in modern browsers (which I guess you are doing anyway)

It may not be related but note that in webkit any children of transformed elements (or parents with backface-visibility: hidden added) will cause their children to lose their fixed positioning. It may be that you have added backface-visibility: hidden somewhere to cure a flicker with animation and this can cause problems for fixed elements that are children.

I’m increasingly finding that chrome is suffering from these types of display bugs. (Sometimes simple media queries will not re flow back when they contain floats or table content.)

6

That did fix the issue, ralphm. I know you’ve mentioned this before, but I was hoping that Chrome would’ve at least been friendly to PaulOB’s suggestion with the use ‘vh’.

7

Yes, PaulOB, I checked for the ‘backface-visibility:hidden’ before I posted on this forum because you’ve said this before on another of my posts. There’s only one reference to it and that is for my menu, which is necessary.

I’ve tried the ‘vh’ and it didn’t seem to make a difference, so I just created a simple hack for Chrome using:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    #contact {
        background-attachment: scroll;
    }
}

I guess we’ll just have to wait for Chrome to catch up. Chrome seems to still have its little quirks.

Thank you!

8

Yes, there are some things it just won’t do properly unfortunately.

The ‘backface-visibility:hidden’ hack is often a hack for problems like the one you are experiencing but because of the fixed positioned aspect in your example then it is unlikely to work poperly.

9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.