3

This code was working fine on my iphone before updating to iOS 9.0.1 (13A404),
but now the same code seems to be working only after finger release,
or after the jQuery onscroll ends, when I do a quick swipe leaving the page scrolling...

$(document).on('scroll', function(){
    if( $(this).scrollTop() > 0){
        $('.menu').addClass('sticky');
    }else{
        $('.menu').removeClass('sticky');
    }
});

The sticky menu just disappears until I release the finger up from the screen, losing the "stickying" effect in realtime during the swipe that I had before in all my websites and that are now broken...

How can solve this problem making them working like I had before? (smooth sticky in realtime)

Paracetamol
  • 320
  • 3
  • 19
neoDev
  • 2,879
  • 3
  • 33
  • 66
  • Why element cant have sticky class from the beginning? – IonDen Sep 29 '15 at 09:03
  • @IonDen I already tried to set a fixed position from the beginning, but I cannot figure out how to do in case I have the sticky menu between other elements e.g. after an header on top of the page – neoDev Sep 29 '15 at 10:59
  • @neoDev The new version of iOS may be "improving" the user experience by showing a static image of the webpage during swipe. You could test this by creating a page with a simple marquee. – Popnoodles Sep 29 '15 at 11:05
  • @Popnoodles Yes I already created a very simple page to make tests – neoDev Sep 29 '15 at 11:09
  • And does the animation pause on swipe/scroll or continue to animate? – Popnoodles Sep 29 '15 at 13:18
  • @Popnoodles what animation? – neoDev Sep 29 '15 at 13:27
  • You need to test whether or not the hypothesis that iOS 9.0.1 (13A404) uses a screenshot version of the webpage while scrolling/swiping is true, which you can do by creating a page with a marquee or other simple animation and see if it freezes while scrolling/swiping. – Popnoodles Sep 29 '15 at 14:04

2 Answers2

9

After observing the same behaviour and testing around a bit, the simplest way is to activate 3D transforms as proposed in a similar question: 

.sticky-element {
   -webkit-transform: translate3d(0px,0px,0px);
}
Paracetamol
  • 320
  • 3
  • 19
  • GREAT! this fixed the issue I had with the StickyJS plugin on my iPhone6. It only snapped into place once scrolling stopped - but after adding this bit of css to the class/element I want to stick; it was working. I haven't got an Android to test on but happy as long as it works on iPhone. – moonunit7 Sep 23 '16 at 09:19
  • The problems with changed rendering behaviour on the client is that no lib can predict this case and all solutions break at the same time. – Paracetamol Nov 07 '16 at 11:26
1

I am seeing the same behavior. It seems iOS9 doesn't want to paint position: fixed elements until AFTER a scroll event has ended.

Example: http://senaeh.de/demo/stickyheaders/simple/

The new sticky header will not show until either the page stops scrolling or the user removes their finger from the screen. Other CSS changes such as background-color work as they should.

This is a regression since iOS8 allowed this completely. Sticky headers are unfortunately not smooth as of ios9.0.1. They still work great on aging Android devices so I'm not sure if this is a bug or if Apple is trying to increase battery life.

EDIT: I filed a bug with Apple (#22902083) so let's hope they make an update to remedy this.

Scott L
  • 533
  • 5
  • 9