Blinking Fixed Header in Site with Scrolling Animation

Blinking fixed header in site with scrolling animation

Well, it looks like this issue is probably isolated to chrome and the speed at which fixed positioned elements render when CSS animations are firing off during scroll.

I wanted to see if this little trick would hardware-accelerate elements that weren't actually the subject of a CSS animation in chrome. Turns out it did. :)

Here's the solution:

.topbar
{
    -webkit-transform: translate3d(0,0,0);
}

Bootstrap 3 Fixed Top Navbar 'Flickering' On Mobile Scrolling using jQuery One-Page Scrolling Effect

Try this

{
  -webkit-backface-visibility: hidden;
}

Reference: https://developer.apple.com/library/content/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Using2Dand3DTransforms/Using2Dand3DTransforms.html#//apple_ref/doc/uid/TP40008032-CH15-SW40

DIVs flickering when positioning them fixed when scrolling inside a Div

if your div sizes are fixed and you want on same position in all browser then no need to call js function simply set css float:left; property with all your divs and use cf class on outer div of that 4 div. Example is:

HTML:

<div class="parent">
    <div class="static cf">
        <div class="left"></div>
        <div class="right"></div>
        <div class="header"></div>
        <div class="footer"></div>
    </div>
</div>

CSS:

.header{
    border:1px solid red;
    width:100px;
    height:100px;
    background-color:#F2F2F2;
    float:left;
    top:0px;
    left:0px;
    z-index:10;
}
.left{
    border:1px solid red;
    height:100px;
    width:100px;
    left:0px;
    float:left;
    top:100px;
    background-color:#CCC;
}
.right{
    border:1px solid red;
    height:100px;
    width:100px;
    right:0px;
    float:left;
    top:100px;
    background-color:#CCC;
}
.footer{
    border:1px solid red;
    width:100px;
    height:100px;
    background-color:#F2F2F2;
    float:left;
    left:0px;
    bottom:0px;
    z-index:10;
}
.static{
    height:105px;
    width:410px;
    position:relative;
}
.cf{clear:both}

Fixed attachment background image flicker/disappear in chrome when coupled with a css transform

This has been a very common unsolved mystery. Recently I had the same problem, and '-webkit-backface-visibility: hidden', proved to be less than useless (on my 'fixed' attached background), since the background just disappeared when it was set. (Additional Info: the reason is that when the background is set as fixed, it is almost similar to putting a fixed 'div' in the background and setting the original div background to be transparent. Hidden backface does the obvious).

To solve the current problem, try setting the 'position' propery of the element as 'static', or if you have given it some other value, namely 'relative', 'fixed' or 'absolute', just remove those.

If you don't remember setting the position property, and the problem still persist, my suggestion is that you use a debugging tool on chrome or firefox, to

make sure there are no manually set values to the 'position' property other than
'static'.

Just spent half an hour searching... Thought this could make it easier for you... regards. :)

SVG Blink Issue On Scroll Up/Scroll Down

I not really familiar with waypoint JS, but you can see my work at https://jsfiddle.net/b85612w7/22/

Basically i think there some flow conflict between waypoint.js beginElement, and jQuery addClass and removeClass, so i try hard fix this by adding your animate duration to setTimeout()

---

Related Topics