Open manfe opened 8 years ago
+1 on experiencing this as well. Would love a fix.
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
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.
It seems to break when we try this, can you upload your working script if it's working?
I am not add this script to site yet.
14 Мар 2017 г. 20:51 пользователь "rdiamondbww" notifications@github.com написал:
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 .
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.