Change Details

{F66739066} (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 [[ https://analytics.wikimedia.org/dashboards/browsers/#all-sites-by-os | 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?) - [ ] 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?) ===== Findings After applying fixes from {T406377}, 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]]: {F66724395} {F66724397} **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`) {F66740297} ===== Issues List [x] DetailView height should be full viewport height. //Note: When using `vh` for legacy browsers, expect the DetailView content to overflow the viewport. // - 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. [ ] DetailView caption background image gradient uses `--dominant-color-hex`, but the value always appears to be `#000000`. <- should be fixed by latest patch [ ] DetailView caption text should be `--dominant-color-contrasting`, not `color-base`. - Refer to `oklch()` browser compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch#browser_compatibility. [x] DetailView caption links should be `dominant-color-contrasting`, not blue links. [x] VTOC 2-column grid items should use a custom style 2-column grid for legacy browsers. - Refer to browser compatibility for Resize Observer https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#browser_compatibility

{F66739066} (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 [[ https://analytics.wikimedia.org/dashboards/browsers/#all-sites-by-os | 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?) - [ ] 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?) ===== Findings After applying fixes from {T406377}, 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]]: {F66724395} {F66724397} **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`) {F66740297} ===== Issues List [x] DetailView height should be full viewport height. //Note: When using `vh` for legacy browsers, expect the DetailView content to overflow the viewport. // - 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. [ ] DetailView caption background image gradient uses `--dominant-color-hex`, but the value always appears to be `#000000`. - <- should be fixed by latest patches [ ] DetailView caption text should be `--dominant-color-contrasting`, not `color-base`. - Refer to `oklch()` browser compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch#browser_compatibility. - this seems safe to do just by switching between `white` and `black` based on `dominantColor.value.isDark` when we set up the variables, can skil the oklsh relative color entirely - <- fixed in latest patches [x] DetailView caption links should be `dominant-color-contrasting`, not blue links. [x] VTOC 2-column grid items should use a custom style 2-column grid for legacy browsers. - Refer to browser compatibility for Resize Observer https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#browser_compatibility

{F66739066} (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 [[ https://analytics.wikimedia.org/dashboards/browsers/#all-sites-by-os | 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?) - [ ] 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?) ===== Findings After applying fixes from {T406377}, 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]]: {F66724395} {F66724397} **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`) {F66740297} ===== Issues List [x] DetailView height should be full viewport height. //Note: When using `vh` for legacy browsers, expect the DetailView content to overflow the viewport. // - 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. [ ] DetailView caption background image gradient uses `--dominant-color-hex`, but the value always appears to be `#000000`. - <- should be fixed by latest patches [ ] DetailView caption text should be `--dominant-color-contrasting`, not `color-base`. - Refer to `oklch()` browser compatibility https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch#browser_compatibility. - this seems safe to do just by switching between `white` and `black` based on `dominantColor.value.isDark` when we set up the variables, can skil the oklsh relative color entirely - <- fixed in latest patches [x] DetailView caption links should be `dominant-color-contrasting`, not blue links. [x] VTOC 2-column grid items should use a custom style 2-column grid for legacy browsers. - Refer to browser compatibility for Resize Observer https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver#browser_compatibility