Broken on iOS

[vhmth]

I know this is a problem. Will be working on it.

[vhmth]

Note to myself for later: probably has to do with position: fixed on iOS not working very well.

[freddywang]

The catch: don't go for native scrolling if you want iOS issue fixed. Try emulated scrolling what iScroll did before iOS5 came out. When inertia scrolling kicks in (the moment your release your touch and page continue its momentum scroll), any offset, scrollTop information is not updated. You are out of luck trying to fit any positioning calculation based on outdated offset/position. At the moment, there is no solution for this until Apple fix it.

[vhmth]

Gotcha. I'll keep that in mind when I work on the patch for it (either later tonight or tomorrow for sure). Thanks for the direction!

[vhmth]

Yes I've closed out the FF issue and have been looking into this issue as well. You're quite right Freddy. There seems to be nothing to be done if I want to use position: fixed on iOS. The biggest problem with Balloon on iOS seems to be the fact that there are no updated values for scrollTop or pageYOffset until the scroll has come to a complete stop (I've tested this by doing short scrolls and everything is fine except for long scrolling and/or scrolling with inertia). I guess I will either wait on Apple to get this shit fixed or write a separate balloon-mobile plugin. :-/

[grimmdude]

I see the dates are old here, but sending a bump your way because this would be nice. Could probably use some CSS to fix it since the year is now 2016 :D

-Garrett

[vhmth]

Hey @grimmdude! Unfortunately I still do not believe there's a solid/surefire fix for this. I actually did something much more ambitious for the last startup I worked at (Upthere), but ran into the same issue in 2014. I was working on doing infinitely-stackable floating headers and ran into the same jitter issues in Safari. The reason this happens is because code like this relies on the scroll event, which is asynchronous and never guaranteed to work since the redraw cycles may happen before the scroll event is actually fired (Safari seems to be less aggressive about firing scroll on the window element compared to Chrome, Firefox and Opera).

Here is the StackOverflow question I opened in 2014:

http://stackoverflow.com/questions/23990069/absolute-positioned-floating-header-jitters-in-safari

The solution is the position: sticky CSS attribute, which has an editor's draft on file:

https://drafts.csswg.org/css-position/#sticky-positioning

The property will become available in Chrome in the next version once it's stable (52):

http://caniuse.com/#feat=css-sticky

Perhaps what I could do is try to use position: sticky as a fallback since it seems like Safari does support this behind the -webkit prefix (actually did not know that until looking into it right now :-P). If you would like to use this library ASAP, I could add that this weekend if that's not too late. Life is a little crazy for me right now - product launch for my startup tomorrow.

[grimmdude]

Hi @vhmth,

Thanks for the quick response, but no need to expedite this; my project is not pressing (that is a good idea though about falling back to position: sticky). Just wanted to give this a friendly bump. Thanks, good luck with your product launch!

-Garrett

[vhmth]

Definitely Garret. Appreciate the good vibes. Feel free to bump me again if I haven't gotten to this and you're looking to use it, but I'll tentatively work on it this weekend.

[vhmth]

Just so ya know I wasn't blowing you off. :-)

https://www.producthunt.com/tech/openvid