| Jrbranaa | |
| Apr 25 2023, 11:20 PM |
| F36963739: Screenshot from 2023-04-26 10-46-01.png | |
| Apr 26 2023, 5:57 PM |
| F36963097: Screenshot 2023-04-25 at 4.18.09 PM.png | |
| Apr 25 2023, 11:20 PM |
Steps to replicate the issue (include links if applicable):
What happens?:
Icons don't appear for any of the components that use icons.
What should have happened instead?:
Icons should have been rendered.
Software version (skip for WMF-hosted wikis like Wikipedia):
Other information (browser name/version, screenshots, etc.):
IE 11 on Windows 10
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| [WIP] Icon: Make CSS-only icons work in IE11 | design/codex | main | +44 -24 |
| Status | Subtype | Assigned | Task | ||
|---|---|---|---|---|---|
| Resolved | egardner | T334434 Update all Codex workspaces to use Vite 4 | |||
| Resolved | Jrbranaa | T334619 Perform a browser support test for Codex built with Vite 4 | |||
| Declined | BUG REPORT | None | T335387 CSS Components on IE11: Icons are not displayed |
Let's do two things before we invest a lot of time/energy into debugging this:
This could be related to / caused by T335430: CSS-only icons in buttons render incorrectly
Based on this Stackoverflow post, I found that I can get the icons to work in IE11 if I make the following changes to the data URI in the background-image rule:
This appears to fix the bug in IE11, and doesn't break Chrome. Next I'll try to write a fix for this in our Less code and test it in IE11, Chrome and Firefox.
Change 912373 had a related patch set uploaded (by Catrope; author: Catrope):
[design/codex@main] [WIP] Icon: Make CSS-only icons work in IE11
The attached patch fixes this bug, but I'm not sure that it's a great idea. We'd have to make a number of compromises in our code to support IE11, and rather than doing that I'd prefer to drop support for IE11, per T288287: Remove IE11 from Basic support ("Grade C")