(obligatory movie poster)
Background
Over at T405992 (our "bug bash" pre-flight task) we sought to identify and eliminate any bugs impacting current-generation browsers. In the course of that exploration we also identified some issues which impact various older browsers (particularly iOS Safari). Let's collect any issues we find here so we can try to address them.
Because this feature is just a prototype with a very limited roll-out, we may not commit to fixing all of the bugs which are identified here (at least not at this point in time). Instead, we may take measures to exclude certain older browser (even ones that might technically meet the "Grade A" requirements) in order to ship our prototype on time. If we decide to scale this feature for wider use, we would want to come back and address any significant issues.
However, if we find that we need to exclude a significant sub-set of traffic due to browser incompatibility, we may also need to somehow signal this in the analytics data we are collecting (which will be used to evaluate our prototype). We don't want "false negatives" to interfere with our metrics.
Requirements
- Add legacy-browser-specific issues in the list below (ideally with screenshots and/or steps to repro) – please include device and browser version
- Check how prevalent the impacted browser versions are in our traffic (see this dashboard for data)
- Determine a browser support policy for the ImageBrowsing prototype (what if any Grade A browsers will we exclude from seeing this feature?)
- Note: Refer to policy details (https://phabricator.wikimedia.org/T406379#11293706) and MediaWiki documentation https://www.mediawiki.org/wiki/Readers/Reader_Growth/WE3.1.3_Image_Browsing#Browser_support_policy
- Implement additional "gating" measures on the client to exclude any browsers we decide we won't serve for the current experiment
- If we do this, we may also need to ensure that we can represent this exclusion in our analytics data somehow (log a new event for this that we can filter out?)
- Note: RG team discussed gating the feature to exclude unsupported browsers and not worrying about excluding that data from analytics for now.
- If we do this, we may also need to ensure that we can represent this exclusion in our analytics data somehow (log a new event for this that we can filter out?)
Findings
After applying fixes from T406377: Image Browsing: iOS 12, 15 have CORS failures if wiki is on HTTP, Safari on iOS 12 doesn't seem to grok the styling we're doing on the image or placeholder icon in the detail view. The whole things end up not fully screen height and the image is either missing or only partly displays.
In theory MediaWiki's "grade A" browser support still goes back to iOS 11.3 as of last November: https://www.mediawiki.org/wiki/Compatibility#Grade_A
Within the range of supported versions I have test devices for last patchlevel on iOS 12, 15, 16, and 18 but no 11s so don't know if there's any other snags there.
Screenshots of the first two selected images on [[Grand Canyon]]:
 |  |
iPad mini 2, iOS 12.5.7
Example: black and white image in the Barbie article (wiki/Barbie?imageBrowsing=1&useskin=minerva#/imagebrowsing/File:Charlotte_Johnson_with_1965_Barbie_doll.jpg)
Issues List
- DetailView height should be full viewport height.
- DetailView image should be visible.
- DetailView control buttons should not overlap each other.
- DetailView caption text should be positioned at the bottom of the image.
- Problem: dynamic viewport height (dvh) browser compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/length#browser_compatibility.
- Solution: Use viewport height (vh) for legacy browsers, and expect the DetailView content to overflow the viewport.
- DetailView caption background image uses a linear gradient with --dominant-color-hex color, but the value always appears to be #000000.
- Note: this may be the CORS on iOS issues (15 is fixed; 12 is not)
- DetailView caption text and more/less button label should be --dominant-color-contrasting color, not color-base.
- Problem: oklch() relative color browser compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch#browser_compatibility.
- Solution: For legacy browsers, we can safely switch between white and black based on dominantColor.value.isDark when we set up the variables. Fix here: https://gerrit.wikimedia.org/r/c/mediawiki/extensions/ReaderExperiments/+/1195074
- DetailView caption links should be dominant-color-contrasting color, not blue links.
- Problem: where() CSS pseudo-class browser compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/:where#browser_compatibility
- Solution: Removed the`where()` usage from CSS code.
- VTOC 2-column grid items should use a custom style 2-column grid for legacy browsers.
- Problem: Resize Observer browser compatibility https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#browser_compatibility. There was an issue calculating the height, which uses ResizeObserver and resulted in grid-row-end: span NaN in unsupported browsers.
- Solution: Check whether Resize Observer is supported and then apply custom VTOC grid styles. If it's supported, then apply the grid-row-end style and grid-auto-rows: 10px for "masonry" tile grid. If it's not supported, then use a simpler custom grid style (grid-auto-rows: auto).
- iOS 15 has CORS failures if wiki is on HTTP (merged from T406377)
- iOS 12 has CORS failures (merged from T406377)
- Note: iOS 12 CORS errors are unresolved, and RG team decided to exlcude iOS 14 and below from the prototype's browser policy.
