iPad scrolling affects tooltip position #464

Open
jcorreia opened this Issue Aug 25, 2011 · 26 comments

Comments

Projects
None yet

Hi, as stated in this post
http://flowplayer.org/tools/forum/30/60068

"the tooltip offsets when you scroll the page on iPad. If you don't scroll, the tooltip shows correctly. Once you scroll, the tooltip begins to show higher on the page"

This might be related with http://forum.jquery.com/topic/offset-returns-incorrect-values-in-ipad

I´ve got this problem with tooltip and overlay plugins, in a html table with lot of tooltip and overlays

In jquery forums there is this workaround, that might be a solution.

"the offset() top value on iPad is exactly off by $(window).scrollTop()

yOffset = (el.offset()).top-$(window).scrollTop();"

I´m usin jquery 1.2.5 and jquery 1.6.1

Thanks

Contributor

bradrobertson commented Aug 25, 2011

We've had other comments on the validator about the very same thing. I
think it's definitely due to jQuery itself. I'll try to take a look at the
ipad for the 1.2.6 release, but I know there are more pressing issue to get
through first. Keep you posted.

On Thu, Aug 25, 2011 at 3:41 AM, jcorreia <
reply@reply.github.com>wrote:

Hi, as stated in this post
http://flowplayer.org/tools/forum/30/60068

"the tooltip offsets when you scroll the page on iPad. If you don't scroll,
the tooltip shows correctly. Once you scroll, the tooltip begins to show
higher on the page"

This might be related with
http://forum.jquery.com/topic/offset-returns-incorrect-values-in-ipad

Ive got this problem with tooltip and overlay plugins, in a html table
with lot of tooltip and overlays

In jquery forums there is this workaround, that might be a solution.

"the offset() top value on iPad is exactly off by $(window).scrollTop()

yOffset = (el.offset()).top-$(window).scrollTop();"

Im usin jquery 1.2.5 and jquery 1.6.1

Thanks

Reply to this email directly or view it on GitHub:
#464

Thanks, I have the same problem with overlay plugin also.
Forgot to mention that I´ve tested this with Safari 4.0.5, 5.0.1, 5.0.2 and 5.0.5 on my Windows 7, and it worked well everytime, So the issue is only with Ipad.

Ipad safari version is
" mozilla/5.0 (Ipad;U;CPU OS 4_3_5 like Mac OS X; pt-pt)
AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8L 1 Safari/6533.18.5"

I´m not so sure this is a jquery problem because in the first forum post I mentioned the user chumtarou said this plugin worked well:

http://craigsworks.com/projects/qtip/
and it uses jquery also

Thanks

Contributor

bradrobertson commented Aug 26, 2011

cool thanks for the heads up. I'll take a look as soon as I can

Contributor

alibby251 commented Sep 3, 2011

This was also logged on issue #112.

jpgcode commented Sep 15, 2011

Hi Guys! Looking at the code and after so much time testing. Finally I've fixed the issue.

In order to fix it I have made the following:

  1. Create global variable inside jquery tools code and assign window. pageYOffset value:
    scrollY = window.pageYOffset;
  2. Notice the actual line where is set the position of the tooltip actually have this call to .scrollTop() jQuery method:
    /iPad/i.test(navigator.userAgent)&&(e-=a(window).scrollTop()
  3. You guys have to replace that code with the following:
    /iPad/i.test(navigator.userAgent) && (e -= scrollY);
  4. Now tooltip on ipad is working placed in the correct position!! =)

Enjoy!

Please let me know if works for you!!

Thanks !!! I will test as soon as I can and give feedback.
wonderfull job :)

Hi,
I´ve already changed the code but I´ve to wait a couple of days, because our server is caching the .js, and I still have to check if ipad has some hard refresh option.

From the code changes I´ve got a doubt, this code you changed is only in tooltip code right ? I didnt found it in overlay...maybe because this is still in test.

Thanks

jpgcode commented Oct 30, 2011

Hi, the change was made in Tooltip only, but I supposed it should be the same for the overlay, I saw the way to calculate the position was the same as Tooltip, I will check overlay when I have some time.

Regards.

This doesn't seem to get fixed, tested http://flowplayer.org/tools/demos/tooltip/index.html on Ipad, Dec 27, 2011. The tooltip seems misplaced after scrolling and sometimes when the orientation is changed from "portrait" to "landscape".

http://postimage.org/image/5h1l7tnud/

http://postimage.org/image/59thb8ayd/

Commenting out the following lines solved the problem for me (lines 107-109 in https://github.com/jquerytools/jquerytools/blob/master/src/tooltip/tooltip.js ):

if (/iPad/i.test(navigator.userAgent)) {
            top -= $(window).scrollTop();
}

jferko commented Feb 7, 2012

The solution from jpavril worked for me. I had to download the jquery.tools.js instead of using the CDN version, but the edited code looks like this:

var scrollY = window.pageYOffset;
/iPad/i.test(navigator.userAgent)&&(e -= scrollY);

It worked in both landscape and portrait. There were a couple of syntax issues that weren't exactly perfect for people looking for a copy-and-paste solution. Thanks!

JPM1987 commented Feb 12, 2012

Hey this solution doesn't work for me. The scrollY bug still appears on my iPad.

I am using:

/iPad/i.test(navigator.userAgent)&&(e -= window.pageYOffset);

Any idea?

jferko commented Feb 13, 2012

JPM1987 the only differences I see between your code and mine are that:

  1. I declare the variable outside the function (shouldn't matter)
  2. I have spaces around "-=" (again, it shouldn't matter)
  3. I'm using jQuery core v1.6.1 and you are using v1.7.1

email me at jferko@backpocketmedia.com and I'll send you the exact jquery.tools.js file that I'm using. At least that way you could try it verbatim.

JPM1987 commented Feb 13, 2012

Thanks for your reply.
1 and 2 shouldn't really matter. I would give your file a try :)

Best regards

Edit: Maybe it's only because I have to use " relative: 'true' " for my tooltips. If I don't use this option the tooltips are displaced on all platforms (PC Browsers and iPad)

Edit 2: Okay relative: true is not the problem. The bug still appears ;)

JPM1987 commented Feb 14, 2012

Sry for bumping but I could locate the issue.

I could specify the appereance of the bug:
The bug only appears if the page is getting reloaded while the site was scrolled down or opened by clicking the link to it.

Edit2: Got it working.
I am using jferkos version and deleted the ipad fixing part :>
Thanks again to jess ;)

BP18 commented Feb 24, 2012

djamshed's solution of removing (commenting out) the iPad specific if statement solves the problem for me too:

// iPad position fix
//if (/iPad/i.test(navigator.userAgent)) {
//  top -= $(window).scrollTop();
//}

Seems like a simpler solution than the other suggested fix... unless there's some other problem with it I'm not aware of.

It looks like there was a workaround in jquerytools to fix the positioning problem in Safari on iOS (see 5926ae9 ).
Now that Apple fixed the problem, the workaround is counterproductive.

Therefore the workaround from the commit above can be removed. But maybe there are still old iPads "in the wild" which need this workaround. Has anyone an idea when Apple fixed the positioning problem? Maybe we'll have to distinct old and new iPads respecitvely iOS versions.

Removing this code works fine for me. I'm using an iPad2 with iOS 5.1.1

Contributor

alibby251 commented May 31, 2012

Hi jrenggli,

Thanks for posting the update - I've been having a look online to see if I can pinpoint any more info on when Apple fixed this, but so far, nothing confirmed. I'm happy to consider this, although it would be good to see if we can get any further indication of whether the issue still affects older versions of iOS? AFAIK, iOS5 is the most recent version of the OS (sorry - not an iPad owner :-( ) - perhaps it would be enough if we can get any confirmation from those still on version 4? I think iOS 5 came out in October last year, or at least was available then - can anyone confirm?

Hi all,
can any one help me to show tooltip on ipad?
can any one show me any example to show tooltip on ipad?
my application is in asp.net.

Still not fixed. I just tried out the demo page for jQuery Tools tooltip and had the problem.

Specifically, I am seeing an issue if you scroll down slightly and then touch the image. The tooltip will show up way above in that case...

Tooltip shows up way to high (near top of view)

Using iPad 2 with 5.1.1.

Contributor

alibby251 commented Sep 26, 2012

Hi,

Have you tried jrenggli's fix, as outlined above? It would help to know if this works, so we can consider if it can be applied to the next version of Tools?

I've tried both these fixes within jquery.tools.min.js (e.g. removing the iPad specific code, and changing the code to include

var scrollY = window.pageYOffset;

/iPad/i.test(navigator.userAgent)&&(e -= scrollY);

Neither of these work. Is it because I'm making the change within the minified script? I'd try it in the main source file, but I can't find where to download it anywhere - on the downloadpage, it says that both minified and source versions are available, but all I can seem to download is the minified version. Can anyone point me in the direction of the source code download, and let me know if making the changes in this file will help, when it hasn't in the minified version?

Thanks.

Contributor

alibby251 commented Sep 28, 2012

Hi getnorthern,

No problem - the source code can be downloaded from here: https://github.com/jquerytools/jquerytools; you will need to change the branch from master to dev, if you want to get the current dev version, which will be the basis for 1.2.8. (Otherwise master is the current source for Tools 1.2.7). I suspect this may help - it is the unminified version that is stored here; it should at least be easier to read!

To get to this page, click on the Download link, which should take you to http://www.jquerytools.org/download/, then click on Report a bug, and click on the Code tab when you get to that page.

poul-kg commented Oct 29, 2012

I confirm that removing below string from minified version of JS file, has solved my problem.

,/iPad/i.test(navigator.userAgent)&&(e-=a(window).scrollTop())

Confirm -> After removing the exact string shown in poul-kg 's last previous post the tooltips with dynamic plugin are now working correctly.

@jpgcode

What is that syntax ? I have seen it before.Can you please explain a little ?

/iPad/i.test(navigator.userAgent)&&(e-=a(window).scrollTop()

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