Streaming live at 10am (PST)

Header Static Background Image glitching


#1

Hello,

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.

This is the webflow working link:
https://webflow.com/design/gabler-dennis3?preview=640ad09acf54a4a0bcc79b7c24e9dc53

This is a screenshot of the problem I'm having on my laptop

Any help is greatly appreciated!


#2

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?


#3

Well the most important is that it works smiley

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.


#4

Cool thanks for catching that : )

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.


#5

I don't reproduce your bug when I preview your site...

Neither there http://gabler-dennis3.webflow.com/


#6

damn ok ... which version of chrome have you got?


#7

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.

Look what I did here : http://sab.webflow.com/test2

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.


#8

Ok yea ... Its a really large image cause I wanted it to be retina display optimised. But I guess I'm just gonna have to lower the quality.


#9

Version 36.0.1985.125

Google Chrome is up to date.


#10

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.


#11

@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.


#12

you are right ... that seems to fix the issue. I did this so the side navi wouldn't appear in the header. Just going to have to find another solutions.

Thanks so much for figuring this out!


#13

ah ok cool ... I'll try to find out how to do it that way! Thanks!


#14