Translate 3d + fixed background on slick slide

HTML & CSS
1

There are loads of google results on this, but none seemingly are good solutions if you have this issue on a slick slider. How can I get these background images to appear?

sp rin g fiel d.fin als ite.co m

This is in webkit.

2

I think you can only get them to appear in webkit by removing the background-attachment fixed from article.

Transforms set a new stacking context for fixed elements making them fixed to that element and not the viewport.

3

Hey Paul, but what if I need the background-attachment:fixed ? I threw it on there because I need the fixed nature.

4

It can’t really be done as fixed elements/backgrounds now have to be outside of any parent that has a transform set because the transformed element creates the stacking context for the fixed elements.

You would need to do the slideshow using something other than transforms to move it sideways (margin etc) but then of course it won’t be smooth.

It is a real pain to work-around.

5

That makes sense, thank you.

How is this example working then? This is a fixed one I’ve made and I’m unable to see why this is working, and the one in this thread isn’t.

st pa tr ic ks . fin al si te . co m

6

Looks like you are moving it with left rather than translate3d.

7

Maybe you could fix position the slider instead?

Not sure if that will give the result you wanted though.

8

Ok so the “working” example is working because I have fade:true set in the slick slider settings which uses a different way (uses left). So that’s why that is like that. I tried fade:true in the broken example, and it fixed it, so that confirmed that theory :slight_smile: .

I need fade:false so I just did a jquery route

  function parallax(){
      var scrolled = $(window).scrollTop();
      $('.home-slider-container.video-image-slideshow article').css('background-position',"0 "+  (scrolled * 1) + 'px');
  }
  $(window).scroll(function(e){
      parallax();
  });

(This is not my original build so excuse how poor the code is)…contractors…

Thanks Paul.

9

Glad you sorted it Ryan.

These 3rd party scripts can be a pain sometimes.:slight_smile:

1 Like
10

It’s quite horrendous. Thanks for the help again. Good to have a second pair of eyes on this.

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.