Material Icons not rendering in Firefox 105.0.3 snap on Ubuntu 22.04.1

[roaku 831]

I'm experiencing a rendering issue with the Material Icons in Firefox after upgrading to the latest Ubuntu LTS. The issue is consistent across Emby servers running 4.7.8 and latest beta. There are no errors in the browser console log or obvious issues with the font or css files transferring or loading.

The icons are rendering fine on Chromium on the same machine. The icons are also rendering fine on the same version of Firefox on Windows.

Anyone else experiencing this with the FF 105.03 snap on Ubuntu 22.04.1?

 

 

Edited October 17, 2022 by roaku

[roaku 831]

I've found some things to try when I get back in front of this machine.

https://github.com/google/material-design-icons/issues/713

[visproduction 250]

Apparently a know bug.  Also see two solutions here: https://support.mozilla.org/en-US/questions/1252262

[roaku 831]

None of the known issues seem to match this one.

The Material Design icons are actually rendering fine on the rest of the web. They're even working fine within the UI for my Iconic plugin (which I have since uninstalled to rule out interference). But, I previously had to put in a workaround  to get around a similar rendering issue, which I documented here.

This appears to be a specific incompatibility between this version of Firefox (I'm guessing the new snap build) and Emby.

I've managed to 'fix' it by using the developer tools style tab to override the default font-face coming from Emby with relative links to the font file locations:

@font-face {
	font-family:'Material Icons';
	src:url('../../web/modules/fonts/material-icons/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP_3.woff2') format('woff2'),
	url('../../web/modules/fonts/material-icons/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmJ_3.woff') format('woff')
}

This fix doesn't work when added through the custom CSS option in the UI, though.

 

There seems to be some sort of disconnect between Emby pre-loading the font with javascript and the font being available to the dynamically loaded CSS files.

So, even though this loads without error within the head tags:

<link rel="preload" href="modules/fonts/material-icons/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP_3.woff2" as="font" type="font/woff2" crossorigin="">

It may not be available to the css for some reason. This has been in the console log for some time, even though the icons were still rendering. Maybe something else changed with this version of FF that stopped it from working at all:

The resource at “http://localhost:8096/web/modules/fonts/material-icons/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP_3.woff2” preloaded with link preload was not used within a few seconds. Make sure all attributes of the preload tag are set correctly. index.html

 

Edited October 17, 2022 by roaku

[Luke 39617]

Didn't you have a topic about this before? I'm not sure the preload is the cause because I think your previous topic predates when we added it.

[roaku 831]

A second workaround is to just update the font-family Emby is using from 'Material Icons Round' to just 'Material Icons'.

So, this:

Quote

@font-face {
  font-family:'Material Icons Round';
  font-style:normal;
  font-weight:400;
  src:local('Material Icons Round'),
  local('MaterialIcons-Round'),
  url(LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP_3.woff2) format('woff2'),
  url(LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmJ_3.woff) format('woff')
}
.md-icon {
  font-family:'Material Icons Round'!important;
  font-weight:400;
  font-style:normal;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  -webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -moz-osx-font-smoothing:grayscale;
  -webkit-font-feature-settings:'liga';
  font-feature-settings:'liga';
  overflow:hidden;
  vertical-align:middle
}

Becomes:

Quote

@font-face {
 font-family:'Material Icons';
 font-style:normal;
 font-weight:400;
 src:local('Material Icons'),
 local('MaterialIcons-Round'),
 url(LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP_3.woff2) format('woff2'),
 url(LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmJ_3.woff) format('woff')
}
.md-icon {
  font-family:'Material Icons'!important;
  font-weight:400;
  font-style:normal;
  line-height:1;
  letter-spacing:normal;
  text-transform:none;
  display:inline-block;
  white-space:nowrap;
  word-wrap:normal;
  -webkit-font-feature-settings:'liga';
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -moz-osx-font-smoothing:grayscale;
  -webkit-font-feature-settings:'liga';
  font-feature-settings:'liga';
  overflow:hidden;
  vertical-align:middle
}

 

17 minutes ago, Luke said:

Didn't you have a topic about this before? I'm not sure the preload is the cause because I think your previous topic predates when we added it.

Yes, I linked to it above, in line. Here it is with the fancy previewer:

 

Both cases seem to be the same after further investigation. I fixed the issue I originally reported within my plugin, and that fix still works within the scoped css of the plugin (again, though, I uninstalled the plugin to rule out interference).

I think Emby's CSS needs to be revisited and tested with the font-family modification. I notice the suffix on the file name went from 2 to 3, suggesting another font version change. What are the chances Google deprecated something in your last font update (2), and removed it in the new one (3)? That could explain why only the new fonts failed in 2 and now all of them are failing in 3.

I'm curious if anyone else can reproduce with 22.04.1 and FF 105.0.3 snap.

Edited October 17, 2022 by roaku

[roaku 831]

As a further test, I removed the snap firefox and added the mozilla ppa to my apt respositories, which installed the deb for Firefox 106.0. The font issue isn't present on this version. Everything is wonderful.

I'm going to continue using the deb because I'm not really on board with the snap push to begin with, but that's twice now this font-family thing has come up on edge cases, so it probably still needs looking into.