jquery.ripples icon indicating copy to clipboard operation
jquery.ripples copied to clipboard

Background-attachment fixed issue

Open WPThemer opened this issue 7 years ago • 5 comments

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

WPThemer avatar Nov 21 '17 21:11 WPThemer

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?

sirxemic avatar Nov 28 '17 16:11 sirxemic

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

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

griffiths avatar Nov 29 '17 02:11 griffiths

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.

sirxemic avatar Dec 07 '17 09:12 sirxemic

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!

i3reakf4st avatar Sep 10 '19 02:09 i3reakf4st

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

sirxemic avatar Sep 15 '19 21:09 sirxemic