Page MenuHomePhabricator

Test and fix browser support
Closed, ResolvedPublic

Assigned To
Authored By
SBisson
Oct 17 2023, 7:44 PM
Referenced Files
F39971809: image.png
Oct 24 2023, 9:35 PM
F39971811: image.png
Oct 24 2023, 9:35 PM
F39971805: image.png
Oct 24 2023, 9:35 PM
F39971800: image.png
Oct 24 2023, 9:35 PM
Subscribers

Description

Goal

Make sure the Wiki-highlight microsite works as expected on research participants devices.

Tasks

  • Establish list of OS and browsers that need to be supported based on target demographics and market shares for iOS and Android
  • Test the site on those browsers
  • Fix as needed. Consider using Babel to transpile to a older version of javascript

Related Objects

StatusSubtypeAssignedTask
OpenNone
Resolvedeamedina

Event Timeline

SBisson triaged this task as High priority.Oct 17 2023, 7:45 PM

Establish list of OS and browsers that need to be supported based on target demographics and market shares for iOS and Android

Initial list based on resources below as well as Browserstack capabilities:

  • iOS: Chrome and Safari, will test up to 3-4 devices ranging from older to newer
  • Android: Chrome, Firefox, Edge, and Samsung Internet, also 3-4 devices ranging from older to newer

https://www.browserstack.com/guide/understanding-browser-market-share
https://gs.statcounter.com/browser-market-share/mobile/worldwide

Used Browserstack to test in many devices and across browsers, both the highlights view as well as the longtext form. The app is testing fairly well in all devices and browsers, the only two issues I was able to find:

  1. The highlights view wouldn't load in iPhone 11 v13 in Chrome, just a blank page and accompanying error message. Using Vite's own build config option, we can set build.target to es2015 to transpile the code correctly and fix this.

image.png (632×708 px, 56 KB)

  1. In browsers where the new CSS unit dvh is not supported yet, the images in HighlightCard appeared to not render at all, because as dvh is invalid it wouldn't set any height at all. Setting a fallback height with vh fixes this.

image.png (960×978 px, 669 KB)

Besides that testing well in iOS and Android, a sampled selection:

image.png (990×1 px, 1 MB)

image.png (1×1 px, 1 MB)