webcompat / web-bugs

A place to report bugs on websites.
https://webcompat.com
Mozilla Public License 2.0
747 stars 67 forks source link

rmow.vertoengage.com - site is not usable #94721

Closed ilatypov closed 2 years ago

ilatypov commented 2 years ago

URL: https://rmow.vertoengage.com/engage/generic-open-clinic?key=xxxGUIDxxx&__cf_chl_jschl_tk__=yyy

Browser / Version: Firefox Mobile 95.0 Operating System: Android 11 Tested Another Browser: Yes Chrome

Problem type: Site is not usable Description: Input buttons not working Steps to Reproduce: Tapping the dropdown lists attempts to focus a keyboard pointer by the look of my keyboard popping up. But this seems to change the page view port or whatnot where the dropdown list folds back. I remember seeing the same on trying to create appointments in calendar.yahoo.com. Both mobile and desktop versions exhibit the same behaviour. Chrome shows a tad better after flickering and stabilizing on the unfolded dropdown list.

View the screenshot Screenshot
Browser Configuration
  • None

From webcompat.com with ❤️

ilatypov commented 2 years ago

Screenshot_20211126-154836_Firefox Beta

ilatypov commented 2 years ago

Screenshot_20211126-154908_Firefox Beta

softvision-raul-bucata commented 2 years ago

We appreciate your report. Unfortunately, the link provided is not a valid link, as the page does not load after the CAPTCHA process is successfully submitted, returning a 404 error.

Firefox: Screenshot_5

Chrome: Screenshot_6

@ilatypov Please leave a comment containing a valid link we will gladly investigate this further.

softvision-raul-bucata commented 2 years ago

ping @ilatypov

ilatypov commented 2 years ago

I am struggling to build a portable reproducer. So far I tried saving the HTML and its files from a desktop browser, then opening that in the mobile browser, but due to a number of CSP policies and some other incompatibilities, the user experience does not get far enough.

A similar collapse of a UI element due to the simultaneous change of the viewport size occurs in Yahoo Calendar (https://calendar.yahoo.com) in mobile browsers when tapping the day's date, observing the day's inset and tapping a free hour in the inset. This briefly shows the "new event" inset but it quickly disappears, probably due to the Android keyboard popping up because of the text focus.

I recorded the video of my Android 11 Chrome 96.0.4664.92 showing both unstable and stable behaviour with the drop-down list of the vaccine booking site. (Sorry, the site may be geo-restricted and behind CloudFlare; the flow begins from https://www.regionofwaterloo.ca/en/health-and-wellness/covid-19-vaccination-pre-registration.aspx# on pressing Book Now that has a key=GUID parameter in the https://rmow.vertoengage.com/engage/generic-open-clinic?key= link).

https://user-images.githubusercontent.com/30419/145479204-b754757d-c61d-4009-9858-4b35205167fc.mp4

ilatypov commented 2 years ago

Attaching the same browser's Yahoo Calendar experience as described in the previous comment. Firefox 95.0.0-beta.6 for Android 11 shows the same inconvenient behaviour.

https://user-images.githubusercontent.com/30419/145480400-c14bf5e1-aa3a-444e-8a7e-e534cab4f9e1.mp4

softvision-raul-bucata commented 2 years ago

@ilatypov Thanks for the extra info. After following your steps to reproduce, I have concluded that the issue is reproducible using other browsers as well. The screen flickers and the keyboard disappears:

Firefox Yahoo Calendar: calendar yahoo

Chrome Yahoo Calendar: calendar yahoo chr

Firefox RMOW:

flickering ff

Chrome RMOW: flickering chr

There is much we can do here as the issue most likely comes from the pages themselves.

@ilatypov For this project, we try to focus our effort on layouts, features, or content that works as expected in one browser but not in another.

Tested with: Browser / Version: Firefox Release 95.1.0 (2015848803-🦎95.0-20211129150630🦎)/ Firefox Nightly 97.0a1 (2015851179 -🦎97.0a1-20211208095339🦎)/ Firefox Beta 95.0.0-beta.6 (2015847755-🦎95.0-20211123190150🦎)/ Chrome Mobile Version 96.0.4664.92 Operating System: Samsung A51 (Android 11) -1080 × 2400 pixels 20:9 aspect ratio (~405 ppi density)

Closing this as Non-compat