Page MenuHomePhabricator
Create Task
Maniphest T314831

[regression-wmf.23] mobile: image in QuickView scrolls up
Closed, ResolvedPublicBUG REPORT
Actions

Assigned To
vadim-kovalenko
Authored By
Etonkovidova
Aug 9 2022, 1:38 AM
Tags
Referenced Files
F35518978: horizontal-scroll.png
Sep 13 2022, 10:13 AM
F35515327: RPReplay_Final1662757282.MP4
Sep 9 2022, 9:24 PM
F35515323: IMG_1933.PNG
Sep 9 2022, 9:24 PM
F35515304: quickview_pixel5_chrome1.gif
Sep 9 2022, 9:24 PM
F35515310: Screen Shot 2022-09-09 at 1.50.02 PM.png
Sep 9 2022, 9:24 PM
F35514829: IMG_0233.MP4
Sep 9 2022, 12:37 PM
F35411908: quick_view_repositioning2.gif
Aug 9 2022, 1:38 AM
Subscribers
Aklapper
CBogen
Etonkovidova
SimoneThisDot

Description

Steps to replicate the issue (include links if applicable):

  • On mobile commons wmf.23 go to Special:MediaSearch (default Image tab) and enter any search term(s), e.g. test (The issue is reproducible in a browser emulator and on real devices for any search term.)
  • Click on the first image to display it in the QuickView
  • Click on the right navigation arrow to go to the next image - it's displayed correctly.
  • Keep clicking on the right navigation arrow - the fifth image (or, sometime, the fourth) will scroll up out of the viewport.

(click on the animated gif below)

quick_view_repositioning2.gif (697×342 px, 663 KB)

Details

SubjectRepoBranchLines +/-
mobile: image in QuickView scrolls upmediawiki/extensions/MediaSearchmaster+2 -2
Customize query in gerrit

Related Objects

Event Timeline

Etonkovidova created this task.Aug 9 2022, 1:38 AM
Restricted Application added a subscriber: Aklapper. · View Herald TranscriptAug 9 2022, 1:38 AM
CBogen moved this task from Triage to MediaSearch on the Structured-Data-Backlog board.Aug 15 2022, 4:42 PM
Etonkovidova updated the task description. (Show Details)Aug 31 2022, 8:35 PM
Seddon assigned this task to vadim-kovalenko.Sep 9 2022, 11:27 AM
Seddon edited projects, added Structured-Data-Backlog (Current Work); removed Structured-Data-Backlog.
Seddon moved this task from Incoming to Doing on the Structured-Data-Backlog (Current Work) board.
vadim-kovalenko added a comment.Sep 9 2022, 12:37 PM

On iOS 15.6 ( both Safari/Chrome ) this bug behaves differently - the next QuickView components keep moving down (see video example).
As for this particular example, I can't reproduce it in the browser and Android 9. @Etonkovidova , could you provide more info about the testing environment?

IMG_0233.MP43 MBDownload

Etonkovidova added a comment.Sep 9 2022, 9:24 PM
In T314831#8224597, @vadim-kovalenko wrote:

On iOS 15.6 ( both Safari/Chrome ) this bug behaves differently - the next QuickView components keep moving down (see video example).
As for this particular example, I can't reproduce it in the browser and Android 9. @Etonkovidova , could you provide more info about the testing environment?

IMG_0233.MP43 MBDownload

@vadim-kovalenko - thank you for looking into it! I did more re-checking and you're right - it seems that the issue looks differently now on iOS. So, therr are two issues - scrolling up when navigating images in QuickView and QuickView overlapping Special:MediaSearch (specific to iOS).

Summary:

The issue (as described in the task) is most reliably reproduces when the last image in the viewport is clicked.
(1) Chrome browser emulator - Pixel5 393 x 851 (reproducible with Android/iOS emulators) https://commons.m.wikimedia.org/w/index.php?search=galaxy&title=Special:MediaSearch&type=image

Screen Shot 2022-09-09 at 1.50.02 PM.png (1×732 px, 701 KB)

click to see an animated gif - the first click there is on the last img in the viewport (as in the screenshot above)
quickview_pixel5_chrome1.gif (762×579 px, 1 MB)

(2) Testing the scenario on real devices
(2a) iPhone 6s (iOS 15) 375 x 667 - as in your a screen recording - the QuickView overlaps the Special:MediaSearch page.

IMG_1933.PNG (640×360 px, 193 KB)

The screen recording shows

  • Special:MediaSearch displays the search results
  • the first img is clicked - and it's displayed as QuickView overlay
  • clicking on the right arrow (to go to the next image) will display the next image in QuickView which overlaps Special:MediaSearch

RPReplay_Final1662757282.MP43 MBDownload

(2b) Samsung Galaxy S8 (Android 9) 360 x 740 - has the same issue as in (1) Chrome browser emulator when the last img in the viewport is clicked

vadim-kovalenko added a comment.EditedSep 12 2022, 8:38 AM

iOS shows a different issue now (as in your screen recording) - if it's better to separate it into a different phab ticket, please let me know. I described the issue below in (2a)

@Etonkovidova Yes, create a dedicated ticket for this, please.

Chrome browser emulator - Pixel5 393 x 851 (reproducible with Android/iOS emulators)

I've managed to reproduce it now, thank you.

Upd: Android issue reproduced on browser prod/beta, but dev environment works as expected. Probably, the issue is happening in the build stage.

Etonkovidova added a comment.Sep 12 2022, 6:12 PM
In T314831#8228159, @vadim-kovalenko wrote:

iOS shows a different issue now (as in your screen recording) - if it's better to separate it into a different phab ticket, please let me know. I described the issue below in (2a)

@Etonkovidova Yes, create a dedicated ticket for this, please.

Filed as T317562: [iOS] - QuickView overlaps Special:MediaSearch page

gerritbot added a comment.Sep 13 2022, 9:57 AM

Change 831829 had a related patch set uploaded (by Vadim Kovalenko; author: Vadim Kovalenko):

[mediawiki/extensions/MediaSearch@master] mobile: image in QuickView scrolls up

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

gerritbot added a project: Patch-For-Review.Sep 13 2022, 9:57 AM
vadim-kovalenko added a comment.Sep 13 2022, 10:13 AM

During my research, I found that there is a horizontal scroll on prod/beta (https://commons.m.wikimedia.org/w/index.php?search=galaxy&title=Special:MediaSearch&type=image)

horizontal-scroll.png (890×423 px, 174 KB)

After additional debugging, I realized that this horizontal scroll bar appearance is connected to the issue mentioned in the description. I fixed it in the patch above so images in the QuickView should work now as well. To test this on iOS, I need this patch to be deployed to beta firsrt.

vadim-kovalenko moved this task from Doing to Code Review on the Structured-Data-Backlog (Current Work) board.Sep 13 2022, 10:13 AM
gerritbot added a comment.Sep 29 2022, 8:06 AM

Change 831829 merged by jenkins-bot:

[mediawiki/extensions/MediaSearch@master] mobile: image in QuickView scrolls up

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

Maintenance_bot removed a project: Patch-For-Review.Sep 29 2022, 8:31 AM
ReleaseTaggerBot added a project: MW-1.40-notes (1.40.0-wmf.4; 2022-10-03).Sep 29 2022, 9:00 AM
Seddon moved this task from Code Review to Blocked on the Structured-Data-Backlog (Current Work) board.Sep 29 2022, 10:28 AM
Seddon moved this task from Blocked to Needs QA on the Structured-Data-Backlog (Current Work) board.Sep 29 2022, 12:58 PM
Etonkovidova moved this task from Needs QA to Verify on Production on the Structured-Data-Backlog (Current Work) board.EditedSep 29 2022, 10:14 PM

Checked in commons betalabs - the issue is fixed. Verified in wmf.6 - the issue is not present.

Etonkovidova closed this task as Resolved.Oct 20 2022, 5:57 PM
Content licensed under Creative Commons Attribution-ShareAlike (CC BY-SA) 4.0 unless otherwise noted; code licensed under GNU General Public License (GPL) 2.0 or later and other open source licenses. By using this site, you agree to the Terms of Use, Privacy Policy, and Code of Conduct. · Wikimedia Foundation · Privacy Policy · Code of Conduct · Terms of Use · Disclaimer · CC-BY-SA · GPL