Compatibility Tables are unreadable without web fonts loaded.

RESOLVED FIXED

Status

P1
normal
RESOLVED FIXED
8 months ago
5 months ago

People

(Reporter: agibson, Assigned: espressive)

Tracking

({in-triage})

Details

(Whiteboard: [specification][type:bug][points=0.5])

Attachments

(2 attachments)

(Reporter)

Description

8 months ago
What did you do?
================
1. Open Firefox Focus (with web fonts disabled)
2. Visit https://developer.mozilla.org/en-US/docs/Web/API/PerformancePaintTiming
3.) Scroll down and try to read the compatibility table.

What happened?
==============
The browser icons are all rendered as squares, making the table unreadbale.

What should have happened?
==========================
The browser icons should ahve been displayed still.

Is there anything else we should know?
======================================
Switching to SVG icons instead of using icon fonts would fix this issue.
(Reporter)

Comment 1

8 months ago
Posted image IMG_2266.JPG
Also happens on iPhone 6s with mobile Safari and "Unobstruct" content blocker set to block web fonts.
(Assignee)

Comment 3

8 months ago
This is part of the FontAwesome work to switch to using SVG as apposed to an icon font. The first stage is to remove FontAwesome, and the follow on is to switch the compat data table to using SVG as well. Those changes will resolve this and other similar issues.
An alternate fix is to use the browser names in the mobile view, see bug 1438889
See Also: → bug 1438889
(Assignee)

Updated

8 months ago
Assignee: nobody → schalk.neethling.bugs
Status: NEW → ASSIGNED
Keywords: in-triage
Priority: -- → P1
Whiteboard: [specification][type:bug] → [specification][type:bug][points=0.5]

Comment 5

7 months ago
Commits pushed to master at https://github.com/mdn/kumascript

https://github.com/mdn/kumascript/commit/2243c58d398e5a37addcf42070096b19aa494ecf
Fix Bug 1480106, on mobile, show browser name istead of icon

https://github.com/mdn/kumascript/commit/75ea74a9ec19272a6b635dc8c749ca25df2fce00
Merge pull request #776 from schalkneethling/bug1480106-use-browser-name-instead-of-icon-mobile-bcd

Fix Bug 1480106, on mobile, show browser name istead of icon
Status: ASSIGNED → RESOLVED
Last Resolved: 7 months ago
Resolution: --- → FIXED

Comment 6

7 months ago
Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/dffc3ee8089e1c8edeb029ae7c68e29e5b117a28
Fix Bug 1480106, on mobile, show browser name istead of icon

https://github.com/mozilla/kuma/commit/147d71abbcc08a4640a6e5030d531171624d3930
Merge pull request #4948 from schalkneethling/bug1480106-use-browser-name-instead-of-icon-mobile-bcd

Fix Bug 1480106, on mobile, show browser name instead of icon
(Assignee)

Comment 7

7 months ago
These fixes are only for mobile viewports. For the moment that seems to be the largest use case where people will be affected. There are plans though to move away from the icons across all devices and viewports.
It sounds like this bug should not have been closed. Please don't use the phrase "fix bug X" in commit messages.
Status: RESOLVED → REOPENED
Resolution: FIXED → ---
The top priority was fixing the mobile view, which is now fixed. Follow-on work for the non-mobile view will be done in bug 1438889.
Status: REOPENED → RESOLVED
Last Resolved: 7 months ago5 months ago
Resolution: --- → FIXED
You need to log in before you can comment on or make changes to this bug.