Streaming live at 10am (PST)

Scroll vibrating images


#1

Hello,

I designed the website construct

All appears to be working fine on my mac in several browsers (aside from the fact I need to adjust the timing of the effects and setup a pre-loader) - now Ive jumped onto a pc, and in chrome the scroll bar is very jumpy all the way down the page, detaching from the top and jumping up again.

Also the other website I created peachy has very jumpy images upon scrolling, with some images failing to load all together.

Any advice?

Thanks


#2

Ok before trying to better understand your issue there is a couple of bugs I know how to fix here.

Can you please share your project’s public link?

Learn how to do it here: http://help.webflow.com/sharing-your-public-webflow-site-link


#3

Thanks I have shared the link as requested.


#4

can you supply us with the link?


#5

Spaceship! Spaceship! Spaceship! Nelson is back ◕‿◕


#6

Could you not click the above links/ I can?

https://preview.webflow.com/preview/peachysbusiness1?preview=6181f05e33058b875a77672048c4a435

https://preview.webflow.com/preview/constructde?preview=8a0a433deb9ff09c2bd87dda53c7854e

thanks smile


#7

Not a solution to your question, but I noticed that I can scroll maybe 1200px to the right on your sites in preview. Something may need to be set to overflow hidden, or an element is set very wide. Have not located the element, but wanted to point out the issue.

Beautiful work - love the look and feel of both of these sites @Stephanie


#8

Give overflow:hiden to each of your three photo background sections, to fix that.


#10

Thanks!
The image is still jittery - its IE11 that the images are jittering while scrolling.

In both chrome and IE - when I scroll down the page and scroll back up, the nav bar isn't "sticking" to the top properly, it is flickering down then jumping to its correct position... I have made the z-index very high and this has not fixed it. Anymore ideas about this?

I am looking at it on a pc which chrome verion 41.0.2272.101

Cheers


#11

Hi @Stephanie, I am super sorry you are having these issues. Sometimes these can be difficult, especially when support for background images vary from browser to browser :-/ I may suggest one thing, select your here section and set the Hero class so that it has a z-index of -1, and is the lowest layer on the page:

Then wait for changes to save and republish the site. See if that helps the issue. May I also ask, what version of Windows are you using? Cheers, Dave smile


#12

Hi Dave,
I tried that - it has stopped the parallax from working (the image jumping is gone though)
I have looked at it in IE 11, on windows 8 and windows 8.1

The navigation bar is jumping up and down the screen still.... especially when scrolling up the page.
Is experiencing these kinds of issues normal when applying effects ?

Thanks


#13

Hi @Stephanie, thanks for the update. These issues are not normal, but how well the fixed background images work with the design may vary from browser to browser.

One thing on the parallax-1 section of the peachy site, is that the fixed bg image being used has the tile property set to on, while the bg image on the hero section is has the bg tile set to off. I would keep that consistent and use the same positioning for both images.

Cheers, Dave


#14