"Sticky" element in Safari

@andrew1 wrote:

I've put together an example of a sticky div here. Basically, I have 3 nested elements:

• sticky-scroller component: sets the height of that will be used on the page
• .overflow: sets the scroll height. This is the element that "moves" when you scroll the sticky-scroller
• .floater: stays in the same relative position on the page. As you move .overflow, .floater will adjust it's position relative to .overflow so that it stays in the same position

This seems like a really simple solution to this problem but I've noticed 2 issues:

• The scroll is fine on a low-def screen in Chrome but is jerky on a high-def screen. I've "fixed" this by binding to the mousewheel event. I have no idea why that works but it seems to make Chrome happy
• It's always jerky in Safari. Even the Ember Twiddle above -- which looks OK on my retina screen -- is terrible in Safari. You can see a flicker and ghost image when you scroll.

Does anyone have any ideas here? I'd like to avoid positioning .floater absolutely as I want it to scroll sideways inside of the component. Any help would be greatly appreciated.

Thanks!

P.S. I've tried using ember-native-scrollable from ember-collection to get the scrollTop and that actually made the scrolling bad on everything (even Firefox which I haven't had problems with before). I've also tried debouncing _didScroll() and that makes the scrolling worse too. One thought I've had is that I could fall back on position: sticky in Safari. It's not supported anywhere else but it does seem to work in the one browser that's really giving me trouble.

Posts: 1

Participants: 1

Read full topic