Page MenuHomePhabricator

Recommended link annotation is sometimes not visible in viewport
Closed, ResolvedPublicBUG REPORT

Description

While demoing suggested edits to a friend 😎 I noticed this bug, where the first annotation is not visible on https://cs.wikipedia.org/wiki/Vratislavsk%C3%BD_pal%C3%A1c:

image.png (2×1 px, 997 KB)

Event Timeline

kostajh changed the subtype of this task from "Task" to "Bug Report".Oct 4 2021, 8:46 AM
kostajh moved this task from Inbox to Needs Discussion on the Growth-Team board.
kostajh added subscribers: MMiller_WMF, RHo.

@RHo / @MMiller_WMF could you decide how you'd like to prioritize dealing with this bug? (Upcoming work or current sprint?) I am not sure how often this occurs in practice, but is potentially very confusing to a newcomer who wouldn't see the text they are being asked to link.

@RHo / @MMiller_WMF could you decide how you'd like to prioritize dealing with this bug? (Upcoming work or current sprint?) I am not sure how often this occurs in practice, but is potentially very confusing to a newcomer who wouldn't see the text they are being asked to link.

Thanks for flagging @kostajh, I agree this would be confusing and wonder about the root cause and extent of the problem. I'd be in favour of prioritising in current sprint if it can be fit into this week's work before Add image front end really gets going, but will defer to @MMiller_WMF for the call.

Not sure if this is specific to iOS15. I checked an article w/infobox on iOS14 and the first annotation is scrolled to (with and without onboarding).

The issue is not specific to iOS 15. I observed it on iOS 13 (e.g. https://cs.wikipedia.org/wiki/Petit_Palais; notice that the infobox is present just as in https://cs.wikipedia.org/wiki/Vratislavský_palác ). After reloading, the first suggestion will be automatically scrolled to.

Hi @Etonkovidova — when the issue was present, did you get the onboarding overlay (on mobile, the scrolling logic works a bit differently depending on whether onboarding was shown or not)? I was able to reproduce once on iOS15. When I tried again (to take a screen recording) I couldn't reproduce the issue :(

Thanks, @kostajh. I do think this should be in Ready for Development now. I'm moving it there.

kostajh triaged this task as Medium priority.Oct 6 2021, 9:50 AM

I'm still unable to consistently reproduce the issue. However, looking at the code and stepping through the lifecycle w/some breakpoints, I think this could be caused by firing the growthExperiments.structuredTask.onboardingCompleted event too early.

If the onboarding dialog is closed after the first recommendation is selected, we currently rely on growthExperiments.structuredTask.onboardingCompleted event to scroll to the selection (because when the selection is initially made, the view isn't in the viewport because the onboarding dialog is covering it). This event is currently fired right after closing the dialog, so there is a possibility that when the handler is executed the dialog is not yet fully closed, causing the annotation view to not be found. This would also explain why this works after reloading, because the onboarding dialog is no longer shown.

To make this a bit more reliable, the event should be fired only when the dialog is closed.

addlink_scrollToAnnotation.gif (1×886 px, 1 MB)

Change 726988 had a related patch set uploaded (by MewOphaswongse; author: MewOphaswongse):

[mediawiki/extensions/GrowthExperiments@master] Add a link: Fire growthExperiments.structuredTask.onboardingCompleted when the dialog is actually closed

https://gerrit.wikimedia.org/r/726988

Change 726988 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Add a link: Fire growthExperiments.structuredTask.onboardingCompleted when the dialog is actually closed

https://gerrit.wikimedia.org/r/726988

Hi @Etonkovidova — when the issue was present, did you get the onboarding overlay (on mobile, the scrolling logic works a bit differently depending on whether onboarding was shown or not)? I was able to reproduce once on iOS15. When I tried again (to take a screen recording) I couldn't reproduce the issue :(

@mewoph - Yes, the onboarding overlay is present and I was dismissing it with "Skip all". The issue is tricky to reproduce, for example, I was not able tor reproduce it on`dewiki", but cswiki displays the issue relatively frequent (I was selecting "Biography (all)" and "Architecture".) And the issue is not reproducible in betalabs and testwiki since the templates are not present there.

I tested the issue on wmf.4. Below are two cases where the issue is still noticeable, but it's not easy to find such cases.

For all cases the overlay was present and dismissed (clicked on "Skip all", not going through the steps).
(1) iPhone 6s (iOS 13). `cswiki wmf.14; topics: "Biography (all)" and "Architecture".

  • after "Skip all" on the overlay is clicked, an article is loaded, as in your screen recording above, the top of the article is displayed in the viewport. Then, if the first suggestion is close to that viewport, the scrolling to the first suggestion won't happen.

IMG_0367.PNG (1×640 px, 84 KB)

The add link inspector will not even allow to go to the next suggestion - the arrow buttons are clicked but no scrolling is happening .
(click to animate the gif)
infobox_stuck.gif (814×484 px, 3 MB)

(2) On Samsung Galaxy the add link inspector is covering the suggestion sometime

Screenshot_20211014-142204_Samsung Internet (1).jpg (2×1 px, 390 KB)

But if I go through the overlay steps, the suggestion will be positioned correctly, so your patch works:

Screenshot_20211014-154314_Samsung Internet.jpg (2×1 px, 543 KB)

Hi @Etonkovidova unfortunately I'm unable to reproduce any of these issues in cswiki (on an iPhone mini as I don't have an iPhone 6). To clarify, for issues 1 & 2, when 1 happens, does that entail 2 or are they separate?

For 1, when you closed the onboarding, was the editor still loading or was the link inspector already up? (The patch applies only to the latter case).

For 2, is the entire article visible or just the first section?

Hi @Etonkovidova unfortunately I'm unable to reproduce any of these issues in cswiki (on an iPhone mini as I don't have an iPhone 6).

I did more testing today to answer your questions:

To clarify, for issues 1 & 2, when 1 happens, does that entail 2 or are they separate?

(1) and (2) are the same issues.

For 1, when you closed the onboarding, was the editor still loading or was the link inspector already up? (The patch applies only to the latter case).

For 2, is the entire article visible or just the first section?

Only the first section is visible.


Testing results
I did more testing to see 1) how frequent the issue(s) are and 2) if they are frequent, how severe their impact on user experiences.

1) how frequent the issue(s) are?
Testing is done on cswiki wmf.4

iPhone 6s iOS 13Samsung Galaxy 8
2 articles out of 10 showed the issue2 articles out of 10 showed the issue

The frequency is the same for iOS and Android. Below are specific links and screenshots (in case there is something in articles' structure that causes the issue):

For https://cs.m.wikipedia.org/wiki/Vandana_Shiva there is an interesting thing - the Chrome browser emulator shows a different position for an infobox template: it's placed above the paragraph

Screen Shot 2021-10-18 at 1.37.11 PM.png (1×744 px, 260 KB)

On a real device the paragraph is place after the infobox.
IMG_0375.PNG (1×640 px, 136 KB)

2) How severe their impact on user experiences?
To see the link recommendation a user needs to do some scrolling - it's not obvious though if the scrolling needs to be done up or down. The issue when clicking on the arrows do not make any effect is fixed - I could not reproduce it.

Thanks @Etonkovidova!

For https://cs.m.wikipedia.org/wiki/Vandana_Shiva there is an interesting thing - the Chrome browser emulator shows a different position for an infobox template: it's placed above the paragraph

I believe this is the article's read vs edit mode? During editing, the first paragraph appears below in the infobox.

Can you confirm the timing on the onboarding? Was the editor still loading when the onboarding dialog was dismissed or was the issue already present when the dialog was closed (editor was done loading)?

I just realized that all your screenshots show the link inspector in compact mode. Did you run into this issue when the link inspector was in the regular mode as well?

Thanks @Etonkovidova!

For https://cs.m.wikipedia.org/wiki/Vandana_Shiva there is an interesting thing - the Chrome browser emulator shows a different position for an infobox template: it's placed above the paragraph

I believe this is the article's read vs edit mode? During editing, the first paragraph appears below in the infobox.

Yes, you're right!

Can you confirm the timing on the onboarding? Was the editor still loading when the onboarding dialog was dismissed or was the issue already present when the dialog was closed (editor was done loading)?

I test it after clicking on "Don't show " checkbox,

I just realized that all your screenshots show the link inspector in compact mode. Did you run into this issue when the link inspector was in the regular mode as well?

Adding the screen size info info on the devices I use for testing:

Apple iPhone 6s375 x 667
Samsung Galaxy S8360 x 740

I try to test on the most representative screen resolutions (which is a debatable thing, the stats numbers are very close for several different resolutions).

Tentatively closing as Resolved. The remaining cases have a minor impact on user experience.