Broken on iOS #2

Open
vhmth opened this Issue Oct 15, 2012 · 9 comments

Comments

Projects
None yet
3 participants
@vhmth
Owner

vhmth commented Oct 15, 2012

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

@vhmth

This comment has been minimized.

Show comment Hide comment
@vhmth

vhmth Oct 15, 2012

Owner

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

Owner

vhmth commented Oct 15, 2012

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

@freddywang

This comment has been minimized.

Show comment Hide comment
@freddywang

freddywang Oct 16, 2012

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.

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

This comment has been minimized.

Show comment Hide comment
@vhmth

vhmth Oct 16, 2012

Owner

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!

Owner

vhmth commented Oct 16, 2012

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

This comment has been minimized.

Show comment Hide comment
@vhmth

vhmth Oct 20, 2012

Owner

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. :-/

Owner

vhmth commented Oct 20, 2012

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

This comment has been minimized.

Show comment Hide comment
@grimmdude

grimmdude Jun 17, 2016

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

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

This comment has been minimized.

Show comment Hide comment
@vhmth

vhmth Jun 17, 2016

Owner

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.

Owner

vhmth commented Jun 17, 2016

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

This comment has been minimized.

Show comment Hide comment
@grimmdude

grimmdude Jun 17, 2016

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

grimmdude commented Jun 17, 2016

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

This comment has been minimized.

Show comment Hide comment
@vhmth

vhmth Jun 17, 2016

Owner

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.

Owner

vhmth commented Jun 17, 2016

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

This comment has been minimized.

Show comment Hide comment
@vhmth

vhmth Jun 17, 2016

Owner

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

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

Owner

vhmth commented Jun 17, 2016

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

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment