Absolute Positioned Floating Header Jitters in Safari

Absolute Positioned Floating Header Jitters in Safari

Since there is an apparent delay between scrolling with the trackpad and the scroll event firing, you can attach the handler to an additional mousewheel event to smoothen things up.

$scrollContainer.on('scroll mousewheel', function () {
    // reinvent the wheel here
});

You can see in this demo here that jittering is far less likely to occur when you scroll with the trackpad. In the demo, I have invoked the handler on load to eliminate the flash when you first scroll on Safari. There may still be some occasional jitter, but if you want to minimize that, you can go the resource intensive way of using setInterval and requestAnimationFrame.

This might fix the problem for now, but as I have said before, this emulation approach is not ideal and you are very likely to run into more trouble down the road.

Workaround for a Safari position: sticky (-webkit-sticky) bug

I think I've figured it out. The trick is to put the entire children of the scrollable container (that is, the header and the content) into a wrapper div - then the bug isn't triggered.

disappearing position fixed header in ios7 mobile safari

I was having the same issue, it seems to be a bug that occurs when there is too much going on inside the page, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.

Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).

Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.

#header {
    position: fixed;
    /* MAGIC HAPPENS HERE */
    transform: translateZ(0);
    -moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    -webkit-transform: translateZ(0);
    -webkit-font-smoothing: antialiased; /* seems to do the same in Safari */
}

How to stop mobile safari from setting fixed positions to absolute on input focus?

Safari has supported position: fixed since at least version 9.2, but if you're seeing difficult issues, you can fully create the fixed position effect by making the document element and body full screen and then using absolute positioning. Scrolling then occurs in some main container element rather than the body. Your "fixed" elements can exist anywhere in the markup using this method.

jsfiddle here

html,
body,
.mainContainer {
  height: 100%;
  width: 100%;
  overflow: hidden;
  margin: 0;
}

.mainContainer {
  overflow: auto;
}

.fixed {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

Position fixed not working in Safari Version 8.0.2

Unfortunately, I never solved this problem with CSS, instead I had to rethink & rebuild the modal design for each of the modals that were being affected - removing all the fixed positioned elements, duplicating the innards for every modal in the markup instead of relying on angular to do it for me-

and upon further investigation ive learned new facts about z-index & the stacking context that could be the cause of the root issue

Every stacking context has a single HTML element as its root element. When a new stacking context is formed on an element, that stacking context confines all of its child elements to a particular place in the stacking order. That means that if an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion! Phillip Walton Article

Glitch with css and webkit when changing background on scroll

I just found a Workaround, might not be the best approach but it works.

Instead of using fixed positioning, I calculate the element's top value using jQuery on scroll.

jQuery(window).scroll(function() {
    scroll_pos = jQuery(this).scrollTop();
    if(scroll_pos > 10) {                       
        jQuery('#header_super_wrapper').css('top', scroll_pos);
    } else {
        jQuery('#header_super_wrapper').css('top', 0);
    }
});

And that's pretty much it.

I hope someone will have a css solution for this issue.

---

Related Topics