I hope someone might be able to help me find the source of my problem. I have a static background image in my header which is glitching in chrome when I scroll down. It only happens when the background image goes below the botton end of the browser window.
Usually as soon the browser passes the botten of the image, it jumps and then goes back to being static … it does the same thing when scrolling the bottom of the image into the browser window when scrolling up.
The problem goes so far that on my laptop the image gets distorted once I scroll past it.
So I figured out that when I delete my side navigation that the problem stops.
Weird thing is … a site that I finished a few days ago has the same kind of header … and I tested it multiple times then and it work … but I just tried it again and it has now the same problem.
Could it be that chrome released an updated the last couple days which is causing a problem with this?
Have you noticed you have an issue with the site having a huge horizontal span because of the video you’ve offset to the right?
The easy way to handle this is to select your section Produktion Contant Section and set it to Overflow: Hidden. so that it’s not taken into account in the width.
Well the problem is gone when the side nav is gone, but I kinda need that nav : ( so it would still be great if someone had a solution for this. Or perhaps confirm that this is a bug with a new chrome update. I just tested it on Safari and the site works fine there.
And be aware that your bg image is huge. 540ko is a lot for a home image. Try to fit it under 200 ko, or try another manner to do your bg. For a start, it’s 3600px wide, it’s huge, try half of it maybe.
You could also enlarge a way smaller image and add a tiny and partially transparent texture over it to hide the low resolution, for example.
I took you image, reduced its dimensions to 20%, saved it at jpeg 49%. I’m down from your 550ko to a mere 60. Then I added a png texture made of a few pixels, on repeat. Total, 64ko. OK it’s extreme but it’s just an example (: You can grab the texture here : (look well it’s very tiny) http://uploads.webflow.com/535553e72953b275210000bd/53da868010e8600605547f72_texture-vdo.png
I made this texture to use it above videos that I enlarge on the whole page. It works great.
If you want your image to behave well on retina displays, you need to prepare a set of images… for example a twice bigger version named filename@2x.jpg.
@dennis I changed Header Section position to Initial (using Google Dev tools on Chrome) I think it is Auto in webflow, and it looks no glitch. I’m wondering if it may works well for you too.
