Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Background-attachment fixed issue #44

Open
WPThemer opened this issue Nov 21, 2017 · 5 comments
Open

Background-attachment fixed issue #44

WPThemer opened this issue Nov 21, 2017 · 5 comments

Comments

@WPThemer
Copy link

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
Copy link
Owner

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
Copy link

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
Copy link
Owner

sirxemic commented Dec 7, 2017

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
Copy link

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
Copy link
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants