Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Hard to switch tabs in Android tablet #287

Open
richb-hanover opened this issue Jan 6, 2024 · 72 comments
Open

Hard to switch tabs in Android tablet #287

richb-hanover opened this issue Jan 6, 2024 · 72 comments

Comments

@richb-hanover
Copy link

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.

  1. 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.

  2. 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
Copy link
Owner

@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 --

  1. Open the JavaScript console and then click on tabs and see if any error messages show up.
  2. 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
Copy link
Author

richb-hanover commented Jan 7, 2024 •
edited
Loading

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
Copy link
Owner

scripting commented Jan 7, 2024 •
edited
Loading

@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
Copy link
Author

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

@scripting
Copy link
Owner

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
Copy link

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
Copy link
Owner

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
Copy link
Author

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

@scripting
Copy link
Owner

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

https://news.lucky.wtf/

@richb-hanover
Copy link
Author

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
Copy link
Owner

I still want to get to the bottom of this.

@richb-hanover
Copy link
Author

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.

  1. 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)
  2. 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.)
  3. 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.
  4. 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
Copy link
Owner

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.

newsPerformance.mov

@richb-hanover
Copy link
Author

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
Copy link
Owner

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

@fmfernandes
Copy link

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
Copy link
Owner

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

@fmfernandes
Copy link

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

blue-flash.mp4

@scripting
Copy link
Owner

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

@richb-hanover
Copy link
Author

richb-hanover commented Jan 16, 2024 •
edited
Loading

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

@fmfernandes fmfernandes mentioned this issue Jan 17, 2024
Open
@richb-hanover
Copy link
Author

@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
Copy link
Owner

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.

  1. I fixed the problem on the scripting.com home page.
  2. 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
Copy link
Owner

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
Copy link
Author

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
Copy link
Owner

@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
Copy link
Author

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
Copy link
Owner

@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
Copy link
Owner

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
Copy link
Owner

scripting commented Mar 8, 2024 •
edited
Loading

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);

@jdmarch
Copy link

jdmarch commented Mar 9, 2024

Pixel 7, all good

@WSeidlich
Copy link

Moto G5 2023 tabs worked fine several times no problems. Thanks.

@scripting
Copy link
Owner

Okay it sounds like this version of the tabs works.

@LilacHammer6
Copy link

HP Envy Everything works. Clippers lost 67 - 102

@FLCoop
Copy link

FLCoop commented Mar 9, 2024

Works fine on my iPad pro

@scripting
Copy link
Owner

Next test

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

This test is simpler, it just displays a picture in each tab.

There is no good or bad result. If it doesn't work, we've gotten closer to finding the problem. If it does, then we know to look elsewhere.

How to

Click on each tab in turn, observe if a new picture has shown up below, and then click the next tab.

And then come back here and say if it worked or it didn't.

Mention the device and browser you're using for the text.

Thanks

And thanks for your help! 😄

@moosebegab
Copy link

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

@danbarnes
Copy link

danbarnes commented Mar 9, 2024 via email

@RolHje
Copy link

RolHje commented Mar 9, 2024

Mac mini M1, Sonoma 14.4, Safari
Displays different picture for every tab

@jon-ault
Copy link

jon-ault commented Mar 9, 2024

Worked on iPhone 15 Pro Max, Safari, iOS 17.3.1.

@grantdunham
Copy link

grantdunham commented Mar 9, 2024 via email

@jon-ault
Copy link

jon-ault commented Mar 9, 2024 •
edited
Loading

Worked on iPhone 15 Pro Max, Safari, iOS 17.3.1.

Whoops, I was wrong. I didn’t realize it until I looked at it on my Mac, but on the iPhone the last two tabs are missing (Mets and Burns) in portrait orientation. If I rotate to landscape & reload then they appear (and work correctly).

I went back & checked yesterday's test & that had the same problem - only the first 4 tabs were displayed in portrait, with no indication that anything was missing.

@danbarnes
Copy link

danbarnes commented Mar 9, 2024 via email

@richb-hanover
Copy link
Author

Updated test results using http://scripting.com/code/testing/tabstest/ TL;DR: works exactly right for all tests.

Details:

  • Works on all tested devices - Fire 8 (10th generation, Brave browser); Asus Nexus 7 (Android 6.0.1, Brave browser); Fire 7 (7th generation; Silk browser); ZTE Bravo 2 phone, Brave browser

  • Works on all tested browsers on macOS (Firefox, Chrome, Safari, Brave)

  • Tiny difference between tablets and desktop browsers:

    • On tablets, all the taps on tabs produced this visual sequence: immediate blue background behind tapped tab, near instantaneous outline of the tab itself; content (the picture) appeared nearly instantaneously as well. Working perfectly
    • On desktop browsers, it is identical except that I never see the blue highlight behind the tab. This doesn't matter to the user experience. I am only reporting that the behavior is slightly different between these two cases.

THANK YOU FOR TRACKING THIS DOWN!

@mvopat
Copy link

mvopat commented Mar 9, 2024

It works for me on the iPhone 13 (with the latest operating system iOS 17.3.1)

@WSeidlich
Copy link

WSeidlich commented Mar 9, 2024 via email

@scripting
Copy link
Owner

scripting commented Mar 9, 2024 •
edited
Loading

It seems like the second test works well. Everyone so far is reporting perfection.

If this keeps up there will be another test tomorrow that replaces one of the pictures with a timeline from FeedLand.

That will help determine if there's interference between the two. If the click meant for the tab is getting captured somehow by the FL bits.

Repository owner deleted a comment from ttepasse Mar 9, 2024
Repository owner deleted a comment from gillesenvrac Mar 10, 2024
@scripting
Copy link
Owner

scripting commented Mar 10, 2024 •
edited
Loading

Here's the next test. It's the same as the previous test, except one of the tabs is a FeedLand timeline.

How to

  1. Go to this page.
  2. Click on each tab in turn from left to right.
  3. Then starting at the last tab go from right to left.
  4. Do the back and forth a few times.
  5. Try clicking on tabs randomly.

Question

Did you have to click on any tab more than once to get it to change?

Also include info about browser and device.

Repository owner deleted a comment from danbarnes Mar 10, 2024
@mokuyo
Copy link

mokuyo commented Mar 10, 2024

iPhone 15 Pro, iOS 17.4
Displayed tabs are responsive through repeated and random clicks.

@scripting
Copy link
Owner

I started a new thread for the fourth test and beyond.

#295 (comment)

Please stay with it. I can move pretty fast if there are enough people trying to make it fail.

@richb-hanover
Copy link
Author

Using http://scripting.com/code/testing/tabstest3/index.html, I saw interesting behavior for the River tab:

  • For all tablet devices tabs, tabs always switched after a single tap (see Hard to switch tabs in Android tablet #287 (comment) for the four devices I tested)

  • For some devices, the River tab was highlighted immediately after the tap. It took a while for the content to show up (as always)

  • For the other devices (two of the four), the River tab did not highlight in any way until the content showed up, at which point the blue background flashed, the outline for the tab appeared, and the content for the pane appeared.

  • As instructed, I clicked left-to-right, then back right-to-left. I think I noticed slightly different behavior for the River tab on the right-to-left tab. Let me know if it would be helpful to have more info

@moosebegab
Copy link

Tabs with pictures and Feedland timeline
all worked on first click.
Works on ipad mini 6 / os 17.0.3 / chrome browser / safari browser
Works on Motorola One 5G Ace / android 11 / chrome browser

@scripting
Copy link
Owner

the only question that matters is whether it ignores your click or responds to it.

it doesn't matter how it responds to it.

thanks for keeping the responses simple.

@scripting
Copy link
Owner

scripting commented Mar 11, 2024 •
edited
Loading

Your help is much appreciated! 😄

Let's try this as a tab test.

https://news.scripting.com/

As with every other test...

  1. Click a tab.
  2. Ignore how long it takes to display the content.
  3. Did it ignore your click?
  4. Click another tab.

Do this a bunch of times.

Did it register your clicks or not?

Remember, forget everything else. All that matters is the tab clicking being heard by the software.

Thank you!

@grantdunham
Copy link

Pixel Phone - Android and Chrome. Worked.

@danbarnes
Copy link

Worked

iPhone 14 Plus, Vivaldi (Chromium) browser

@Solo-500
Copy link

tabs work, paragraphs in News run too wide. iphone mini 13.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests