search

sirxemic / jquery.ripples

Add a water ripple effect to your background using WebGL.
https://sirxemic.github.io/jquery.ripples/
MIT License
1.06k stars 416 forks source link

Background-attachment fixed issue #44

Open WPThemer opened 6 years ago

WPThemer commented 6 years ago

Hi, this is so awesome, and I want to use it in any case, I already spent 4 hours without fixing it.. if I set background-attachment: fixed; the image flickers a lot, it only seems to work in Chrome.. I tried to remove the property position:relative; and set it to position:static; then the mouse over effect doesn't seem to work. Is there any workaround for this ?

thanks

sirxemic commented 6 years ago

I'm unfamiliar with the flickering, and I cannot think of what's causing it... Could you create a minimal test case to demonstrate the issue?

griffiths commented 6 years ago

Have experienced the same - see here: http://nonchalant-mailbox.surge.sh/

The image jumps / flickers as you scroll down in most browsers for me.

sirxemic commented 6 years ago

The only "workaround" (if you can even call it) that I can think of at the moment is to not use background-attachment: fixed. If I'm not mistaken, nowadays browsers do some trickery to make scrolling perform better/more smoothly, but it can cause javascript logic which depends on the viewport position to lag behind, which causes the jumpy behavior.

i3reakf4st commented 5 years ago

Hey! Even worse, with collapsing divs (e.g. in Bootstrap 4), the whole background collapses, too. Is there a workaround? Even when not using background-attachment:fixed, the image while horizontally resize as soon as a div collapses/shows. Vertically though, it will just scroll through the background color.

I hope I was able to express the issue clearly^^ love your ripples!

sirxemic commented 5 years ago

@i3reakf4st Could you demonstrate it somewhere (jsfiddle or codepen or whatever)? I don't have a good picture of what's happening in your case.