Bug: Blinking in IPad Safari.

[manfe]

Thank you for the great lib. But looks like there is a problem when recalculating in IPad Safari.

Check the gif below to understand what I am saying, when scrolling to bottom or top the left content is blinking strangely.

Both sides (content and sidebar) are in the Theia initializer:

$('.categories .content, .categories .sidebar-content').theiaStickySidebar();

It's working great in another browsers and devices, but in Ipad Safari is blinking on recalculating.

[rdiamondbww]

+1 on experiencing this as well. Would love a fix.

[liviucmg]

This is happening because of a well-known bug withposition: fixed in iOS. If we change the position from anything to fixed while scrolling, the element disappears/blinks until the scroll ends. Very weird.

We also get some erratic scroll-top values during the inertial scroll, as if the user would be scrolling up and down.

I've tried several potential solutions but none of them worked - see below. I won't be putting any more time into this as I already spent 2+ hours. If anyone else wants to take a shot at this, please be my guest and best of luck!

http://stackoverflow.com/questions/18753367/jquery-live-scroll-event-on-mobile-work-around http://stackoverflow.com/questions/22842992/how-to-force-safari-to-repaint-positionfixed-elements-on-scroll http://stackoverflow.com/questions/8840580/force-dom-redraw-refresh-on-chrome-mac https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios

[sn3ka]

Hi,

I tried something that is almost fixing this issue.

around the line 260 replace:

o.stickySidebar.css({
'position': 'fixed',
'width': getWidthForObject(o.stickySidebar) + 'px',
'transform': 'translateY(' + top + 'px)',
'left': (o.sidebar.offset().left + parseInt(o.sidebar.css('padding-left')) - scrollLeft) + 'px',
'top': '0px'});

by

 o.stickySidebar.css({
'position': 'fixed',
'width': getWidthForObject(o.stickySidebar) + 'px',
'transform': 'translateY(' + top + 'px)',
'left': (o.sidebar.offset().left + parseInt(o.sidebar.css('padding-left')) - scrollLeft) + 'px',
'top': '0px',
'-webkit-overflow-scrolling': 'touch'});
o.stickySidebar.find('*').css('-webkit-transform',' translate3d(0, 0, 0)');

There are still some scrolling bugs but no disappearance anymore.

[rdiamondbww]

It seems to break when we try this, can you upload your working script if it's working?

[vitiodev]

I am not add this script to site yet.

14 Мар 2017 г. 20:51 пользователь "rdiamondbww" [email protected] написал:

It seems to break when we try this, can you upload your working script if it's working?

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/WeCodePixels/theia-sticky-sidebar/issues/28#issuecomment-286504978, or mute the thread https://github.com/notifications/unsubscribe-auth/ARxVYIKlyfSdzVKCMyBZy0TYsQtHFfQLks5rltONgaJpZM4JUuMn .