Member Avatar for rdev

I'm having problem on my fixed background during transition. I have 2 panels, the panel-1 has 2 images which will animate from left to right and from right to left respectively, basically it will just add a class 'animate' to trigger the transition. During the transition, the panel-2 (which has the fixed background and some text contents) will flickers in chrome. Kindly check it live http://jsfiddle.net/7EqaV/embedded/result/

Any advice? Thanks in advance!..

HTML code:

<div class="wrapper">
<input type="button" value='animate' id="animate" />
<div class="panel-1">
    <div class="items" id="slideLeft">
        <img src="">
    </div>
    <div class="items" id="slideRight">
        <img src="">
    </div>
</div>
<div class="panel-2">
    <div class="bg"></div>
    <div class="content">
            <h1>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna</h1>

    </div>
</div>

CSS code:

 .wrapper {
    width:500px;
    margin:auto;
}
.panel-1, .panel-2 {
    width:100%;
    height: 200px;
    border: 2px solid #000;
    position:relative;
}
.panel-2 .bg {
    width:100%;
    height: 200px;
    background:url() no-repeat;
    background-size:cover;
    background-attachment: fixed;
    position: absolute;
    background-position:center;
}
.items {
    width:150px;
    height:150px;
}
.content {
    position:absolute;
    z-index:2;
    width:100%;
}
h1 {
    filter:alpha(opacity=0);
    -moz-opacity:0;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    -moz-transition: opacity 1s ease-in-out;
    color:#FFF;
    font-size:15px;
}
#slideLeft, #slideRight {
    -webkit-transition:-webkit-transform 1s 0s;
    -moz-transition: -moz-transform 1s 0s;
    width:150px;
    height:150px;
}
#slideLeft {
    float:left;
    -webkit-transform:translate3d(-200%, 0, 0);
    -moz-transform:translate3d(-200%, 0, 0);
}
#slideRight {
    float:right;
    -webkit-transform:translate3d(200%, 0, 0);
    -moz-transform:translate3d(200%, 0, 0);
}
.animate #slideLeft, .animate #slideRight {
    -webkit-transform:translate3d(0, 0, 0);
    -moz-transform:translate3d(0, 0, 0);
}
.animate h1 {
    filter:alpha(opacity=100) !important;
    -moz-opacity:1 !important;
    opacity: 1 !important;
}

JS code:

$(document).ready(function () {
    $('input#animate').click(function () {
        $('.panel-1, .panel-2').toggleClass('animate');
    });
});
  • 1 Contributor
  • 1 Reply
  • 263 Views
  • 4 Minutes Discussion Span
  • Latest Post Latest Post by rdev

Dani AI

Generated

Known cause and quick diagnosis

Chrome has a long-standing rendering/compositing quirk: an element that uses background-attachment: fixed can flicker or disappear when other parts of the page trigger GPU/compositor activity (CSS transforms, translate3d, animations). The fixed attachment is painted relative to the viewport, and mixing viewport-fixed backgrounds with transformed/layered content often forces repaints that show up as flicker in Chrome. (developer.mozilla.org)

Short troubleshooting checklist

  • Temporarily remove background-attachment: fixed on the problematic element; if the flicker stops, that property is the trigger.
  • Try moving the background out of the transformed/animated container (put it on body or as a separate fixed element) — fixed backgrounds that live outside transformed parents avoid the repaint interactions that cause flicker. (stackoverflow.com)

Robust fixes (ordered by how safe/portable they are)

  1. Put the visual background in its own fixed layer (preferred). Create a position: fixed element (or a ::before pseudo-element attached to body) and place it behind the panel’s content; keep the animated panels separate so the background isn’t in the transformed stacking context. This preserves parallax/fixed look without relying on background-attachment: fixed. (cssscript.com)

  2. If moving the background is impossible, try forcing a separate composite layer for the background (or for the animated sibling) using will-change: transform or transform: translateZ(0) / translate3d(0,0,0). These can reduce repaint flicker but must be used sparingly (resource cost) and tested across browsers; will-change is the modern, spec’d hint. Also note some hacks like -webkit-backface-visibility: hidden can break backgrounds in some cases. (developer.mozilla.org)

Minimal example (illustrative—not a copy of the fiddle)

/* background moved into its own fixed layer */
.bg-fixed {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background-size: cover;
  z-index: 0;
}
.panel-2 .content { position: relative; z-index: 1; }

Summary — practical order to try

  1. Remove background-attachment: fixed to confirm the cause.
  2. Move the background to a position: fixed layer (best fix).
  3. If unavoidable, try will-change / translateZ(0) as a last resort and test for performance/side effects. (stackoverflow.com)

Relevant thread and examples cited above mirror the same Chrome-specific behaviour seen in ’s fiddle and show that moving the background out of the transformed context is the most reliable long-term solution. (stackoverflow.com)

Member Avatar for rdev

Kindly check my codes here http://jsfiddle.net/7EqaV/. any suggestions is much appreciated.. thanks!!. by the way it flickers only in chrome.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.