CODEWITHSUNDEEP
javascriptjqueryhtmlcssgoogle-chrome
Neil Day
Neil Day

Reputation: 11

backstretch causing problems with other background images in chrome

I'm using Backstretch.js and a custom field in a Wordpress site to apply fullscreen background images dynamically.

It's working fine for the body back ground image but I also have another element on the page with a background image set by CSS and backstretch seems to be messing it up, but only in Chrome.

When the page loads the both background images display fine, but when I scroll down the page the css background disappears - sometimes completely, sometimes just random parts of it. If I remove backstretch then the CSS bg behaves normally. Ideally i'd like them both to be fixed as well.

BACKSTRETCH

<?php $image = get_post_meta($post->ID, 'wpcf-background-image', TRUE); ?>
    <?php if ( ! empty ( $image ) ) { ?>
        <script>
            jQuery.backstretch("<?php echo $image ?>");
        </script>
<?php } ?>

CSS

.full-grey-cover {
overflow: hidden;
background-image: url(images/menu-bg-2.jpg) !important;
background-repeat: no-repeat !important; 
background-size: cover !important;
background-position: center !important;
background-attachment: fixed !important;
-webkit-background-size: cover !important;
-moz-background-size: cover !important;
-o-background-size: cover !important;
background-size: cover !important;

}

I've currently got 2 pages setup using backstretch for the background.

http://ffionas.ashfordweb.co.uk/

and

http://ffionas.ashfordweb.co.uk/brunch

Seem to work fine in FF and Safari but not in Chrome (Mac/Mavericks). Annoying because I only had to use backstretch as the fixed BG would play nice on IOS devices..

N.

Upvotes: 1

Views: 1789

Answers (3)

user2408082
user2408082

Reputation: 11

In a single page site (http://www.abarthpulizie.it/) i had the same problem described by Neil Day. I used Backstretch in two ways. First I sync background image with an animated slider realizes with Sweeper am animate.less css lib. Second I sync background change with scroll to various section of one page site.

Until Chrome update all worked. After Backstretch stopped working properly.

I tried Janusz Chodzicki solution (avoid negative z-index) with some corrections (I forked original Github project: https://github.com/magicbruno/jquery-backstretch) but this resolved only first problem.

When the page is scrolled i have strange result. Fixed Background scrolls, backstrech image doesn't appear at all or appears just a moment or partially cutted, etc...

Finally I tried to remove the css rule "-webkit-backface-visibility: hidden" that animate.less attaches to body and now all work like before Chrome update (alsa without the no negative z-index correction.

I hope this will be useful to someones

Upvotes: 0

Janusz Chodzicki
Janusz Chodzicki

Reputation: 25

This solution working for me.

You need add this code scope in Backstretch.js

$('body').wrapInner('<div id="backstreach-fix" style="z-index: 1; position: relative;">');

in a.fn.backstretch after 

0 === a(d).scrollTop() && d.scrollTo(0, 0);

I also need to change zIndex in this file.

Find zIndex:-999998 and change to zIndex:1

Find zIndex:-999999 and change to zIndex:0

Upvotes: 1

Cyril Mestrom
Cyril Mestrom

Reputation: 6212

After the last update of Chrome (38.0.2125.101 m) I encountered the same problem with backstretch. After debugging I found out it was the negative z-index value for the .backstretch class, that was messing up my website. After changing the z-index to 1 and changing my wrapper class to position:relative with z-index:2 everything is back to normal again. Hope it helps!

Upvotes: 1

Related Questions