Working on this site and I haven’t gotten into the responsive stuff yet, but I’m having this strange issue where the hero images on the sub-level pages are cutoff on the top and then I refresh and it looks fine. I can’t figure out what I’ve done to cause this.
This site is BT4 - Books
And here’s a screencap of what’s happening:
That’s really odd Evan! It must be something to do with the way Chrome is rendering something in the page. Try to remove the opacity from that section and see if that fixes it.
Yes it is! I still can’t figure it out. I don’t have a transparency set for that section so I filled it with white just to see if that would help and I’m getting the same result. The frustrating part is that it’s intermittent and I don’t know when it’s going to happen. Seeing it in both Chrome and Canary.
Have you tried removing the opacity style you have on it?
I think its a chrome bug with the fixed background property and the vertical positioning of the background. Remove either the fixed state or set the background position to 0 0 and problem seems to go away.
I’m having a similar issue on a page I’m working on.
http://winterbreak.webflow.com/
The red section has a fixed “striped” background that doesn’t work/is glitchy in Chrome. It seems to work ok in Firefox and Safari in my testing.
Any ideas?
Turning off the fixed element attribute does fix it in yours as well (toggled it off in the inspector). That is a really strange and pretty surprising redraw bug in Chrome (first time I have encountered it). I am surprised that it doesn’t show up on parallax sites? Do you have a gradient over an image or is your pattern just a gradient?
There is a gradient over it, but it was doing that before the gradient was there. I’ve used the fixed background on other sites, and it has worked in chrome. I’m not sure what’s causing the issue on this page.
It may be the text over the fixed element / image and/or gradient. Many times for me the bug looks like a text background redraw error rather than a result of the image itself. Many times it shows the striped void perfectly wrapping the text and margins, which is what makes it seem like a likely culprit. Maybe try to temporarily hide the text and publish to see if the problem goes away to isolate the bug.
caniuse.com may shorten the process of nailing down the bug. search each CSS attribute involved and see if they have specific work arounds for your case. caniuse is a very well documented resource.
It looks like there’s a bug in Chrome when using a video background and a fixed background on the same page. I’ll just loose the fixed bg on this page I guess. Thanks for the help!
Good to know - thanks for posting source of the bug and the solution Drew. Glad you got it sorted.
