search

dsifford / academic-bloggers-toolkit

WordPress plugin providing an all-in-one solution for effective academic blogging.
https://wordpress.org/plugins/academic-bloggers-toolkit/
GNU General Public License v3.0
120 stars 38 forks source link

Possible issue: tooltip not closing on mobile #570

Open mcombeau opened 5 years ago

mcombeau commented 5 years ago

ABT Version: 5.1.0

PHP Version: 7.2.19

Theme: Writer (Version: 1.2.2), also tested on other WP themes like Twentysixteen, Twentynineteen, etc.

Plugin List: Disabled all other plugins, same behavior.

Browsers: Mobile (iPhone 5S):

Expected behavior: On mobile, tooltip should close when you tap on or away from it, and/or there should be a close button. Looking through the older GitHub issues, I saw a couple that suggest there is supposed to be a close button on mobile? My tooltips are exactly the same on desktop and on mobile.

Actual behavior: On mobile, the tooltip does not leave the screen unless another tooltip is opened, or if you tap on an image for some reason. The tooltip remains at the top or bottom of the page as you scroll down or up respectively, even much past the citation point. The tooltip looks exactly the same on mobile as it does on desktop, with no close button. This is problematic for large tooltips with many citations, or long citations, which can take up a large chunk of a small mobile screen:

MobileLongTooltipNoCloseBtn

Console messages: Pretty sure this wouldn't affect ABT, but just in case, this is the only js error I have:

// Uncaught ReferenceError: soundManager is not defined
    at <anonymous>:2:9
    at t.activateScript (rocket-loader.min.js:1)
    at rocket-loader.min.js:1
    at t.run (rocket-loader.min.js:1)
    at rocket-loader.min.js:1
    at HTMLScriptElement.<anonymous> (rocket-loader.min.js:1)

Anyway, I really, really, adore this plugin. Thank you so much for your hard work on it! :)

dsifford commented 5 years ago

Hm, very strange. What you describe is not the intended behavior.

Do have a link to an affected page that I can look at by change?

Looking through the older GitHub issues, I saw a couple that suggest there is supposed to be a close button on mobile? My tooltips are exactly the same on desktop and on mobile.

This was back in an older version of the plugin where I wrote the logic for the tooltips myself. I've now offloaded that responsibility to the extremely popular and battle-tested popper.js library. Which is even more strange, because they should work better than before.. Very strange...

Anyway, yeah, very strange... I look forward to seeing

mcombeau commented 5 years ago

Hmm, interesting.

Sorry, I meant to leave you a link. You can view the problem here:

And other posts.

Let me know, if you want, I can PM you some admin credentials if you feel like poking around the backend of a staging/testing version of this site.

I'll throw some extra info at you here, because I don't know what is and isn't relevant to you, and maybe it can help you figure this out.

Anyway, this isn't a big issue, the plugin is still very usable, so no pressure! Thanks!

dsifford commented 5 years ago

Alright sorry for the delay.

Just checked into it and I'm not able to reproduce the issue of the tooltips not closing on mobile (even on your links), but I am seeing an issue where tooltips initially render off-screen and then bounce into the correct position when the screen is scrolled a bit. So I can prob look into that.

The website is on Cloudflare CDN, so there is page caching and JS and CSS minification going on. I'll have to check but I think the JS might also be moved to the footer.

Minification is fine (it's already minified!), but caching may or may not result in some annoyances until stale cache is busted (usually should only be a problem soon after updating).

There is a display issue for the tooltip (which appears to be only happening with my current theme - other themes display it correctly), where the tooltip appears underneath some of the sidebar widgets (on desktop) and links inside the tooltip are delayed in disappearing when the tooltip is destroyed.

They probably have z-index set to an insanely large value, which forces whatever element contains that class to be positioned on the top. So you're correct in that the fix for that would have to be done on the theme side.

mcombeau commented 5 years ago

Hmmm, odd.

If you're still curious to see what I see, here's a screen recording of the tooltips on one of my iphones : https://imgur.com/S1xtcy6 -- The link viewed in the recording was https://www.culturesofwestafrica.com/fr/calebasse-constante-culturelle-cosmologique/ As you can see, the tooltip does stay at the top/bottom of the screen no matter what. What you can't see there is my tapping everywhere to get rid of it. Only tapping on another citation point closes the tooltip to open another one.

Anyway, part of me is glad you couldn't reproduce the issue, it means my phones are just being weird and it behaves correctly for other people. Sorry to have taken up your time with this. I really appreciate you looking into it, though, thanks!

(PS: Yep it was the z-index, that's fixed now.)

dsifford commented 5 years ago

@Sogoba Is this still occurring for you? I can't reproduce anymore. Can this issue be closed?

adriandomenico commented 4 years ago

Hi, I've spent several days getting to grips with this most excellent plugin. My last test, after config and styling, is mobile device tests. In the Chrome devtools mobile device simulator everything works as expected.

Expected behaviour on touch screens Touch a ref. number: popup appears. Touch anywhere else on screen: popup disappears.

Real device tests iPhone X: No problems. Works as expected in all browsers.

iPhone 6, old iPad 3 & iPad Air: All browsers - touch to opening a reference. Popup appears as expected. Touch anywhere else on screen: popup is persistent. Multiple touches of the trigger icon will eventually clear it, or tapping another reference icon will close the popup and open the selected.

Given that iPhone X works fine, it looks like this is an issue to do with older devices.

As you said elsewhere, there are issues with the popup swinging into the view-port but on iPhone X scrolling, or touch-and-hold to move the screen sideways, resolves the problem.

Hope this helps.

Adrian