search

jquery-backstretch / jquery-backstretch

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized, slideshow-capable background image to any page or element. The image will stretch to fit the page/element, and will automatically resize as the window/element size changes.
http://www.jquery-backstretch.com
MIT License
3.91k stars 912 forks source link

Background not fixed with -webkit-transform: translate3d(0,0,0); #454

Open londonuk371 opened 7 years ago

londonuk371 commented 7 years ago

Hello,

I use jquery-backstretch to change the body background after windows is loaded: $("#body_page").backstretch(["/images/bg_contact.jpg"], {centeredY: false, fade: 2000});

The CSS of the body:

.body-default {
    height: 100%;
    font-size:16px;
    padding-top: 50px;
    background-image: url(/images/start-bg.jpg);
    background-color : white;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    overflow-y:scroll;
    background-attachment: fixed;
}

The body element in DOM: <body id="body_page" class="body-default"> I wanted to add -webkit-transform: translate3d(0,0,0); to accelerate the page display, but with this option on .body-default, the backstretch background is not fixed anymore. And yet, the body-default background is till fixed with -webkit-transform: translate3d(0,0,0);.

Is there any chance to accelerate the display using -webkit-transform: translate3d(0,0,0); or something else with backstretch ?

Here is an example: https://jsfiddle.net/7u83fwcs/5/, if you remove -webkit-transform: translate3d(0,0,0); fixed attachment will work

Thanks, Vincent.