Repainting issues: background-attachment: fixed

HTML & CSS
1

Hi everyone,

I am working on a site: taroworks.wpengine.com

I am trying to impliment this demo from codyhouse into a full screen modal: https://codyhouse.co/demo/fixed-background-effect/

Looks great on desktops and even on laptop sized browser windows. The problem is that there is severe breaking of the images, or no images at all (divs are always there in the correct size though), when on an actual laptop (not just changing the browser window on a larger desktop). I had read that background-attachment: fixed takes considerable resources, as the image has to be repainted on every scroll event.

The thing that bugged me was that the CodyHouse demo seems to work fine on a laptop, so after hours of pulling my hair out thinking it was something in my project’s code causing the issue, I thought maybe it was an image size issue. So I ripped the exact images from cody house, as they were significantly smaller than mine, but the problem persists. Now I have stripped all of my modal animations, I had a lot of fancy animations going on to bring the demo in and a form thats a gate to the demo.

What you will see now, is the page loads, you click “VIEW DEMO” button in the hero and the demo will fade in. Please let me know any suggestions of places to look in the code or if its just a plain old resource hog and on a full production site with a db and backend, standard laptop graphics cards just cant handle the repainting.

Any help would be great!

Note: This is a WordPress site (custom theme and templates) with Bootstrap for it’s grid, and the problem seems far worse on Chrome vs Firefox and Safari.

HTML

<div class="demo-outer">
    <div style="background-image: url('<?php echo get_template_directory_uri() . '/img/demo-screens/img-1.jpg';?>');" class="container-fluid fixed-bg img-1"></div>
    <div style="background-image: url('<?php echo get_template_directory_uri() . '/img/demo-screens/img-2.jpg';?>');" class="container-fluid fixed-bg img-2"></div>
</div>

CSS

.body-scroll {
    position: fixed;
    overflow: hidden;
}

.demo-outer {
    display: none;
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vw;
    overflow: auto;
    z-index: 999;
}

.fixed-bg {
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

JS

$('button[data-demo]').on('click', function() {
     $('.demo-outer').fadeIn();
     $('body').addClass('body-scroll');
});
2

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