slick kills my background-attachment

[ninjaonsafari]

Hi!
I know i have to provide a demo, but i couldn't reproduce the issue with less sources. But i have the site online, so you can take a look this page.
At the third section should a fixed background-image be displayed.
In all major browser and os except chrome it works like a charm.

i've tried all the known fixes for this bug like:

backface-visibility: hidden;
-webkit-perspective: 1000;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transform: translateZ(0);

Could you please take a look at even i didnt follow you guidlines?

A link to your production site is not a reduced test case.

Thanks for any help
and greate plugin!

[simeydotme]

Thank you for contributing, Tobais...
You should really google your problems before you post them here :disappointed:

http://stackoverflow.com/questions/20268962/fixed-attachment-background-image-flicker-disappear-in-chrome-when-coupled-with
http://codepen.io/herzflimmern/blog/chrome-bug-with-fixed-background-and-translate3d

( found with: https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=chrome%20bug%20background%20attachment%20fixed )

your solution is:

.parallax-image {
  -webkit-transform: translateZ(0);
}

[ninjaonsafari]

@simeydotme sorry for bother you, but as i wrote i tried those "fixes" already.
i spent 5 hours with google this issue...

[ninjaonsafari]

what i tried so far:

• removed all translate3d
• useCss: false
• remove slick from the page (worked)
• added the translateZ(0) fixes

i just created a fiddle

[simeydotme]

I just applied it on your website and it's fixed

the code:

.parallax-image {
  -webkit-transform: translateZ(0);
}

I can confirm fixes your problem.

[ninjaonsafari]

@simeydotme damn...
i tried it again and as you see in the fiddle it doesnt work...
are you on windows and chrome 39.0.2171.99?

[simeydotme]

OSX Chrome
39.0.2171.95 (64-bit)

let me update and see. :smile:

[simeydotme]

Still the translateZ(0) fixes after update to 39.0.2171.99 (64-bit) 😁

[ninjaonsafari]

you really have magic hands!
https://www.screenr.com/WzuN

[simeydotme]

haha @tobaiasjl actually not... it appears our wires were crossed; the solution I gave you was to fix the background completely disappearing... however I can't even recreate that now. (I'm assuming you're changing code on that page?)

Basically what I was seeing was: The panel was empty, until I forced a repaint with text-selection or something, translateZ(0) was correcting this paint bug. As for the background being fixed I can't help right now, will look in a while :smile:

Simon

[simeydotme]

ah, here's some examples of it bugging out:

translateZ(0) prevents this, somehow ^_^;

[ninjaonsafari]

i haven't changed the code since. Somewhere in your or mine code is an -webkit-transform which messes up this section. Even if i add useCss: false.

I'm currently replacing slick :disappointed:
and will check if the issue persists.

i will keep you up-to-date

Tobias

[simeydotme]

shame, but again I think it's quite clearly a browser-bug with Chrome, Slick unfortunately brings it to light as it uses translate3d() to make your CSS transitions nice and smooth. - You could try opening the slick CSS/JS and replacing any transform3d with translateX :)

[ninjaonsafari]

okey i will take a look at this.
should i create a pull-request? cause a lot of people have the same issue or similar.

Thanks for your help!
tobias

[simeydotme]

hey @tobaiasjl i would say its a great idea and really noble to help everyone with your work ! 😊

If you are going to do that, though, I suggest you reduce the case down using something like JSFiddle where it's only the carousel and a fixed-background and demonstrate that it is indeed a problem (outside of your website) and that you can indeed correct it with your PR! :)

Good luck! :bow:

[kenwheeler]

Closing pending PR

[mmdonaldson]

Hi all, I am actually also having this problem. I assume the PR was never created?

[goatandsheep]

I as well

[alibasheer]

Me as well

[dlewand691]

As well. Just came across this issue and haven't found a solution yet.

[killianmh]

Slick.js uses transforms to smoothly move slides which create a new stacking context. See this discussion for an explanation.

I get around this issue first by manually removing the transform3d css on the slick-track and slick-list elements (parallax in Firefox won't work without this) and then by setting fade: true in the slick settings:

$(".mySlider").on("init", function(event, slick){
$(this).find(".slick-list").css("transform", "none");
$(this).find(".slick-track").css("transform", "none");
})
$(".mySlider").slick({
fade: true,
});

[sajjadh47]

Not sure if it helps anyone but when i tried backface-visibility: visible; it worked for me!