Hard to switch tabs in Android tablet

richb-hanover commented 10 months ago

I have been reading Scripting News for a couple years on my Amazon Fire HD 8 (10th generation) running Android version 9 using Brave browser (version 1.61.109)

Recently, I find I have a hard time changing/clicking new tabs on the main page. I expect to be able to tap to move to/select the desired tab. What actually happens is difficult to describe but is one of these behaviors:

I almost always have to tap a tab twice to switch
Sometimes I have to tap many more times.
Maybe it helps to "double-tap" where I tap, wait bit, then tap again (about the time between beats for Stayin' Alive by the Bee Gees)
In all cases, I simply farble around, clicking as long as necessary to get to the new tab

I have not determined a pattern to what triggers any of these behaviors. I have also tried varying tap-lengths from brief to holding down for a second.

To rule out hardware problems, I made two tests, both work as expected, and seem to rule out any hardware problem in my tablet.

Clicking any of the underlined links in the body of the page works as expected: A tap will go to the desired page; long-clicking opens the context menu that allows me to open in a new tab, etc.
I used archive.org to look at Scripting News in the past. The tabs work exactly as expected. I chose December 20, 2022 at 05:31:49 (https://web.archive.org/web/20221221053149/http://scripting.com/) .

I started noticing this around the time the newest Scripting News came out; I remember some mention of making all the tab/menu handling the same across all the programs and I wonder if this behavior is related.

What other debugging information could I provide? Many thanks.

scripting commented 10 months ago

@richb-hanover -- thanks for the very thorough report.

It sounds like the problems were introduced when I did a rewrite of the tab code, and it's probably due to some code catching the click before it gets to the tab code. Once found, it's easy to fix.

A couple of things to try --

Open the JavaScript console and then click on tabs and see if any error messages show up.
Try it with another browser, or try it with Brave on another machine. That would help determine if the issue is with Android or with Brave. I don't have an Android table to test with and don't use Brave.

I'll post a link to this issue on Scripting News, to see if other people have input.

And thanks again for the thorough report. :-)

richb-hanover commented 10 months ago

Update:

I see the same behavior (difficulty switching tabs) in Chrome 106.0.5249.126 on my ancient Asus Nexus 7 running Android 6.0.1.
I see the same behavior in Chrome 120.0.6099.119 running on an iPad running iOS 15.5 (both recent Chrome and iOS)
I cannot reproduce the behavior using recent Chrome or Firefox on my iPhone 14 (also recent). Tabs immediately highlight and switch as expected when tapped.
I will need some time to figure out how to attach a debugger to my tablet(s) for debugging. (I have discovered decent documentation - I need to work this in with other projects.)
Thanks for the mention on Scripting News!

scripting commented 10 months ago

@richb-hanover -- thanks, that's very helpful. now i don't have to install Brave.

i have an iPad, but haven't tried running news.scripting.com in chrome on the iPad, I generally use Safari there.

i really appreciate your staying with this. ;-)

richb-hanover commented 10 months ago

You're welcome. My philosophy on this kind of stuff is expressed here: https://randomneuronsfiring.com/wpntfiiwdkib/

scripting commented 10 months ago

That's a great philosophy. Along a similar line, I've long felt they should teach every college grad how to write a good bug report.

http://scripting.com/stories/2010/06/30/writingGoodBugReports.html

Your bug reports are great. I have been occupied doing other things, but when I can swing around to this I'm sure we'll be able zero in on the problem right away.

scotthansonde commented 10 months ago

I don't have an Android tablet, but I do see similar behavior on on my iPad (iPadOS 17.1.2) in both Chrome 120.0.6099.119 and Safari. Safari seems to catch the taps more often than Chrome, but it does miss one sometimes.

When I have a spare moment I'll to get a debugger going to see if there are any messages in the console.

scripting commented 10 months ago

I just tried it on my iPad in both Chrome and Safari, the performance was as it is on my desktop system, it works as it's supposed to.

richb-hanover commented 10 months ago

OK. I'll keep diggin' (but later this week). Thanks.

scripting commented 10 months ago

Also please try it with this, a new version of the software, same content.

https://news.lucky.wtf/

richb-hanover commented 10 months ago

This version is better.

Every tap switches to the new tab (this is progress!)
But... There's a half-second to two-second delay between the tap and any visual change that confirms the tap. This is the sequence that I notice:
- Tap
- Pause 0.5 to two seconds with no visual change. Then in rapid succession, I see:
  - Outline of new tab surrounding the proper title
  - Brief flash of blue to highlight the tab
  - Content appears below

Thanks!

scripting commented 10 months ago

I still want to get to the bottom of this.

richb-hanover commented 10 months ago

Update: Today, I went to news.lucky.wtf on my Fire tablet with Brave browser and it appears the tab behavior has changed, mostly for the better.

Tapping a tab always switches to the desired tab. (This is a definite improvement.) It may take a bit of time to occur (see item 3 below)
Sometimes tapping a tab will immediately give a light blue background behind the text of the tab. That remains until the content gets loaded. (This is a great behavior. It gives immediate feedback that the tap was recognized and it's reasonable / understandable that the content might take some time to arrive.)
Other times, a tap gives no feedback for "a beat" (about a second?), then a brief flash of blue background behind the tab which then disappears, then a wait while the content downloads.
Nearly always, the link in the URL bar will change instantly to show the recently-tapped tab

Using my old (slower) Asus Nexus 7 tablet with Chrome:

It works substantially as described above.
Most taps give item number 3. Item number 2 (immediate blue background feedback) is rare.
There's a much longer pause between the tap and the flash of blue background (2-4 seconds)
Most of the time the URL (item 4) changes immediately, but sometimes it takes a longer time, and occasionally it happens after the flash of the tab's background...

Using my iPhone 14 with either Chrome or Firefox:

Tabs always switch as expected (Item number 2 above)
I was surprised that tabs have a grey background, not a light blue highlight when switching.

I have not had time to figure out invoking the debugger to look for error messages in the browser console. Thanks again.

scripting commented 10 months ago

First @richb-hanover -- thanks for sticking with this.

As I read your outline I was thinking, I wonder what "slow" looks like on his system.

So I thought I'd start by doing a demo of how news.lucky.wtf performs on my system.

https://github.com/scripting/Scripting-News/assets/1686843/d225d932-7f67-441a-a0d0-5b3710001541

richb-hanover commented 10 months ago

The attached video is exactly what it looks like on my desktop computer. I judge its speed to be completely acceptable.

I need to figure out how to make a screen recording of an Android tablet where taps are "evident" to show what I'm seeing. I need to work on other projects today, but will look for time for a screen recording soon. Thanks again.

scripting commented 10 months ago

thanks, no rush. i've asked some other people to come take a look at this too.

fmfernandes commented 10 months ago

Just found out that the brief blue flash comes from -webkit-tap-highlight-color, for Chrome it defaults to a light blue, that's why it's different on Safari.

scripting commented 10 months ago

@fmfernandes -- i haven't seen the brief blue flash. could you do a little video to demo?

fmfernandes commented 10 months ago

Sure. It'll only show on mobile (or when emulating one):

https://github.com/scripting/Scripting-News/assets/24195829/afe7f587-dd9a-4d69-9b36-f9cefc79d683

scripting commented 10 months ago

@fmfernandes -- thanks -- i may want to get rid of the focus-setting. now i know what to look for. ;-)

richb-hanover commented 10 months ago

I figured out how to do screen recording. I hope this gives additional clues:

The attached video shows news.lucky.wtf as of 8:50pm on 15 Jan 2024 running on an Android Fire tablet in the Brave browser. Note that:

a tap on some tabs instantly shows a blue background. This is great. It gives feedback that the tap was recognized. (See the "All" and "Politics" tabs, part way through)
a tap on other tabs may take a half second to a couple seconds to be recognized in the GUI by drawing the tab border / displaying a blue background. Although
This is better than the production site (see below) because a tap always switches tabs

https://github.com/scripting/Scripting-News/assets/1094930/dd8dc7b0-69ec-4a39-8e0e-fc262ccf7f0d https://github.com/scripting/Scripting-News/assets/1094930/dd8dc7b0-69ec-4a39-8e0e-fc262ccf7f0d

For comparison, here's the production scripting.com site. Note the difficulty switching tabs - frequently requiring a double-tap to switch tabs:

https://github.com/scripting/Scripting-News/assets/1094930/56c7957f-7b97-4bb9-96a8-00834b442612 https://github.com/scripting/Scripting-News/assets/1094930/56c7957f-7b97-4bb9-96a8-00834b442612

richb-hanover commented 8 months ago

@scripting I wonder if there's an update. (I updated the video links so they may appear now.)

I continue to use news.lucky.wtf, where a single tap on a tab always switches to the tab. This remains different from the production scripting.com site, where I have to "tease" my Android tablet to switch.

I realize that it's not a vote, but I would be happy to see the production site switch to the code that runs news.lucky.wtf. Thanks as always.

scripting commented 8 months ago

I was working on something completely different today and saw the problem with tab-clicking.

It happened in Chrome on my Mac in a mode where it emulates an iPad Mini.

My first theory was there was another click handler somewhere that was catching the click and not propagating it.

There aren't good ways to trap this in the debugger, but my limited ability to check this out via searching in source code said this wasn't it.

I looked for things I could turn off to see if the problem went away, and in that I seem to have found a conflict.

If I commented out the code that adds a tooltip to the tab object then I no longer had any problems with clicking.

Then I tried something less drastic. Instead of putting the tooltip on the whole tab, I just put it on the icon at the beginning of the tab. Again no problem.

So here's how you can help.

I fixed the problem on the scripting.com home page.
So go there, on a tablet, or an emulated one, preferably something where it failed before, and try it now.

Report results here:

a) fixed b) might be fixed c) not fixed

scripting commented 8 months ago

I decided to make a stronger test, I commented out the code that adds the tooltip. That should make this a stronger test.

richb-hanover commented 8 months ago

I am sad to say that it is "c) not fixed". It does not appear to be materially different from my original report.

Here's how I tested at 2:40pm ET on 7 Mar 2024:

I rebooted the same Fire 8 tablet as in the original report. I turned on Settings -> Device -> Developer -> Show taps to confirm that the OS registered my taps.

I then open scripting.com in the Brave browser. I reloaded the page for good measure. Less than half the time taps are recognized. Frequently, I can tap, double-tap, tap-wait-a-beat-tap with no effect. I can usually get to a new tab by repeated fussing, but as I noted above, it is not materially different from the original report.

HOWEVER... news.lucky.wtf continues to work well. Every tap on a tab is recognized. (It does take a while to retrieve the contents of the page, but the tab gives good feedback that the switch is happening.)

What other info could I provide? Thanks as always

scripting commented 8 months ago

@richb-hanover -- thanks for the report.

the good news is that i saw the problem here today. there's nothing i can do to fix the problem until i can reproduce it.

thanks for sticking with it.

richb-hanover commented 8 months ago

I don't mean to perseverate, but I want to be clear that the news.lucky.wtf tabs work perfectly in all my test cases (Android tablet, iPhone, desktop browser). Thanks.

scripting commented 8 months ago

@richb-hanover -- you've made that point well. i've read all your messages, and am working on this question this morning.

the big change is that now I am able to reproduce the problem. until yesterday i had not been able to do that. i can't debug something i can't see happen. i've now said that three times. please believe me. i want to solve this problem.

i'm going to report another experiment i did in the next message for anyone who is tuning in who might be puzzling this out alongside us.

scripting commented 8 months ago

I did a bit more research in trying to answer this question -- why would this happen on a mobile device and not on a website accessed from a desktop computer (assuming that's true for other people, it is true for me).

it turns out that the browser has special events for mobile devices because clicking is different there. they are called touchstart, touchend, touchmove. and they have another set of events that capture both classes, pointerdown, pointerup, pointermove. chatgpt recommends trying using "pointerdown" in place of "click" and seeing if that helps. as far as I can tell, it doesn't make a difference. the tabs still are only sometimes responsive.

scripting commented 8 months ago

okay so the next thing i want to look at is to see what's the difference between news.scripting.com and news.lucky.wtf.

there is a difference. both use the filter.js feature in pagepark, and a new feature in pagepark that hooks directly into FeedLand news products. so this is what's in filter.js on news.scripting.com:

const newsProductOptions = {
    urlServer: "https://feedland.social/newsproduct",
    urlApp: "http://scripting.com/code/newsproducthome/index.html",
    urlNewsProductSpec: "http://scripting.com/code/newsproducthome/newsscriptingcom.json"
    };
options.runNewsProduct (newsProductOptions);

and this is what's in filter.js on news.lucky.wtf:

const newsProductOptions = {
    urlServer: "https://feedland.com/newsproduct",
    urlApp: "http://scripting.com/code/newsproducthome2/index.html",
    urlNewsProductSpec: "http://scripting.com/code/newsproducthome/newsscriptingcom2.json"
    };
options.runNewsProduct (newsProductOptions);

scripting commented 8 months ago

Reviewing the differences,

urlServer -- one is being rendered by feedland.social (a new server) and the other is rendered by feedland.com. these are running the same software (feedland.com is one version behind the feedland.social, we should fix that).
urlApp -- they're using different versions of the newsProductHome software.
urlNewsProductSpec -- they are defined by different specs.

Now it's really hard for me to imagine that there are any real differences between the different versions and software, but there does seem to be a behavior difference. So I'm going to dive into that little cave and see if anything interesting shows up.

scripting commented 8 months ago

I just did a text comparison between the two different versions, and the only difference I can see is that they're using different FeedLand instances to do the rendering of the news product.

In the specs there are text and styling differences, and the order of the tabs changed, but it's really hard to imagine those having any impact on tab-clicking.

scripting commented 8 months ago

Okay here's another test.

http://scripting.com/code/tabsmanager2/testing/

Please click on that link, on a tablet system, and click on the tabs.

Same as before, does it work, or not.

Say what kind of device you were using.

There is no good or bad answer. It's just a test.

Thanks! :-)

grantdunham commented 8 months ago

Using a Pixel 6 phone - Android 14; Chrome browser. The page opens and the tabs work on first click. The page size does not fit a phone - it spills to the right. The tabs along the top - just 4 of them. No Bloggers or Dave tabs.

scripting commented 8 months ago

@grantdunham -- thanks for the report. all i care about here are the tabs and if clicks work or not. this was thrown together for this test.

jon-ault commented 8 months ago

Works OK for me. Tabs took 1-2 seconds to populate but only had to click each one once. Using Safari on a iPhone 15 Pro Max running iOS 17.3.1.

richb-hanover commented 8 months ago

Using Amazon Fire 8 tablet (same as original post) and Brave browser. This page looks good:

Tap is always recognized, and always switches to desired content (after longish load time)
Sometimes there's an immediate blue background, sometimes only an outline
Here's a video of how it worked...

Thanks!

https://github.com/scripting/Scripting-News/assets/1094930/c9233442-7c9c-4ae3-96c7-e81fe777e5fc

(To help me remember next time, here's how I capture the video: 1) Turn on Settings -> Device -> Developer -> Show taps; 2) I used Screen Recorder Professional 1.0.0.0; 3) Open the app, this puts a little orange gizmo on the right edge; 4) tap the red dot to begin recording; 5) Make sure the screen orientation is as desired - recording retains original orientation; 6) when complete, click the orange gizmo, then hit two-parallel-bars; 7) go to the Screen Recorder Professional app; 8) touch the hamburger icon for the desired video on the right and choose Share; 9) use mail to send it to myself

gwthompson commented 8 months ago

@scripting -- Using an iPad Pro 12.9 the page opens and the tabs all work on first click and continue to work as I refresh the page and switch tabs.

Using a Lenovo Tab M10 tablet running Android 10 the page opens and the tabs all work on first click.

Using an iPhone 13 mini the page opens and the first 4 tabs are visible and all work on first click.

MitchWagnerSD commented 8 months ago

"All," "Politics," and "Tech" worked with one tap each. Had to tap "Podcasts" twice the first time I tried it, but after that performance was fine.

scripting commented 8 months ago

Please make it clear up front if it did or didn't work. The rest of it may be helpful if it says what kind of tablet you're using and what browser. The rest of it is not helpful.

MitchWagnerSD commented 8 months ago

I did about 10 taps and it worked 9 times out of 10.

moosebegab commented 8 months ago

Works on ipad mini 6 / os 17.0.3 / chrome browser Works on Motorola One 5G Ace / android 11 / chrome browser

Okay here's another test.

http://scripting.com/code/tabsmanager2/testing/

Please click on that link, on a tablet system, and click on the tabs.

Same as before, does it work, or not.

Say what kind of device you were using.

There is no good or bad answer. It's just a test.

Thanks! :-)