why background image jerks while scrolling when using css as background-attachment:scroll

Question

I am using background-attachment:scroll for two divs, Scrolling works perfectly but only the issue is background image jerks while scrolling. I am attaching my CSS below:

.slider_area {
    width:100%;
    height:600px;
    background:#9ad5e3 url(../images/slide_1.jpg) center top no-repeat; 
    background-attachment:scroll;
    -webkit-background-attachment:scroll;
    background-size:cover;
}

.cont_1_wrapper {
    width:100%;
    height:auto;
    padding:100px 0;
    background:url(../images/cont_1_bg_b.jpg) repeat;
    background-attachment:scroll;
}

<script>

    $(window).scroll(function() {
        var scrolledY = $(window).scrollTop();
        $('.scroll').css('background-position', 'center ' + ((scrolledY)) + 'px');
    });

</script>

JSFIDDLE LINK : https://jsfiddle.net/ansarmon/apxrztat/1/

Can someone help me with this?

Are you on a mac? Also what type of Image ext (jpg / png / gif etc)? Did you optimize the image (is it 2 - 3mb)? — Cam, Dec 16 '15 at 06:30
@Cam both mac and windows showing same jerking, Image format jpg and below 350 kb resolution. — ansarmon, Dec 16 '15 at 06:43
@Madan Bhandari, image is jerking while scrolling that's the issue. an up and movement in the image. — ansarmon, Dec 16 '15 at 07:24
@ansarmon it's working perfectly on my pc. If you are talking about top blank space, then use margin-top for .main_wrapper — Madan Bhandari, Dec 16 '15 at 07:34
Works perfectly for my mac too without any jerks. Did you test it on some other computer? Does your jsfiddle also show jerks? — Naisheel Verdhan, Dec 16 '15 at 07:37
@Madan Bhandari, can u pls scroll up and down slowly using scroll bar on right background image will jerk. — ansarmon, Dec 16 '15 at 07:38
yeah, I got it, Have you checked with higher resolution ? If not try with high resolution image. — Madan Bhandari, Dec 16 '15 at 07:44
@ Naisheel Verdhan , I tried in ipad too, there is also the same issue. — ansarmon, Dec 16 '15 at 07:44
@ Madan Bhandari , I checked with a png image , same issue is there too. — ansarmon, Dec 16 '15 at 07:50

score 0 · Answer 1 · answered Dec 16 '15 at 07:56

0

Try adding

transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);

to .slider_area

answered Dec 16 '15 at 07:56

EekTheCat

127
11

Yes... same by using mouseweel... but in your fiddle after i added this, flickering stopped while i use scrollbar. Try answers from http://stackoverflow.com/questions/20268962/fixed-attachment-background-image-flicker-disappear-in-chrome-when-coupled-with – EekTheCat Dec 16 '15 at 08:14

score 0 · Answer 2 · answered Dec 16 '15 at 08:22

0

You can use background-attachment:fixed; for fixed background image. No need of jquery.

.slider_area 
{
    width:100%;
    height:600px;
    background:#9ad5e3 url(http://www.pro.net.in/demo/cheetahbridge/images/slide_1.jpg) center top no-repeat;   
    background-attachment:fixed;
    -webkit-background-attachment:fixed;
    background-size:cover;
}

https://jsfiddle.net/62jv0nz5/

answered Dec 16 '15 at 08:22

Asim K T

16,864
10
77
99

before I used same background-attachment:fixed; but the issue is not supported in ipad and mobile. So turned to use it. – ansarmon Dec 16 '15 at 08:25
Yes. looks like background-attachment:fixed; have some issues. Eventhough it've a good support. http://caniuse.com/#search=background-attachment – Asim K T Dec 16 '15 at 10:20
yes, older versions of browsers not supporting these codes. that's the main issue. I am trying to get rid of it. – ansarmon Dec 16 '15 at 11:39
OK. Anyway if you are trying to create a parallax website you could always use libraries like skrollr, which removes developer headache. – Asim K T Dec 17 '15 at 07:25

why background image jerks while scrolling when using css as background-attachment:scroll

2 Answers2