Tabler Icons Stall Firefox on Windows
I am a Cacti developer and we are considering switching from FontAwesome Web Fonts to Tabler Web Fonts. However, on Firefox for Windows only, we are having a major slowdown when using the Tabler SVG based webfonts. The page load is first stalled by Firefox apparently loading all the Web Fonts, which would appear normal with any browser (though exceedingly slow on Firefox for some reason).
However, once the page is loaded, when going off tab to another browser tab, and then back to the Firefox tab that includes the Tabler webfonts, there is a 3 second delay before the tab switches. When we enable the performance analyzer, we find that the delay is almost 100% Reflow of the page, even though the page is static as this point (no changes) from the last time it was activated.
We do not have this issue on Firefox for Linux, MS Edge or any other Chromium browser, only Firefox on Windows. I'm using the latest version 134. Should I be opening a bug?
Wšě wotmołwy (13)
There is a clue here: https://github.com/tabler/tabler-icons/issues/476
When turning on debugging as indicated we are getting a ton of these (see below).
Could this be the issue? Why not Chromium browsers?
downloadable font: GSUB: Bad ligature offset 5766 for ligature 0 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:0) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff2?v3.26.0 downloadable font: GSUB: Failed to parse ligature set 8 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:0) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff2?v3.26.0 downloadable font: GSUB: Failed to parse subtable 0 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:0) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff2?v3.26.0 downloadable font: GSUB: Failed to parse lookup 0 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:0) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff2?v3.26.0 downloadable font: GSUB: Failed to parse lookup list table (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:0) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff2?v3.26.0 downloadable font: GSUB: Failed to parse table (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:0) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff2?v3.26.0 downloadable font: rejected by sanitizer (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:0) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff2?v3.26.0 downloadable font: GSUB: Bad ligature offset 5766 for ligature 0 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:1) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff? downloadable font: GSUB: Failed to parse ligature set 8 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:1) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff? downloadable font: GSUB: Failed to parse subtable 0 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:1) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff? downloadable font: GSUB: Failed to parse lookup 0 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:1) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff? downloadable font: GSUB: Failed to parse lookup list table (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:1) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff? downloadable font: GSUB: Failed to parse table (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:1) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff? downloadable font: rejected by sanitizer (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:1) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff? ....
Thanks for your report and research. As noted in the Github issue, Firefox "Nightly" (alpha) editions reject fonts with certain invalid data. However, that should not be happening in the Firefox 134 because validation is not applied by default in release channels other than Nightly. Could you check your setting:
(1) In a new tab, type or paste about:config in the address bar and press Enter/Return. Click the button accepting the risk.
More info on about:config: Configuration Editor for Firefox. The moderators would like us to remind you that changes made through this back door aren't fully supported and aren't guaranteed to continue working in the future.
(2) In the search box in the page, type or paste gfx.downloadable_fonts.otl_validation and pause while the list is filtered
(3) If the preference has a value of true, double-click it (or click the Toggle button at the right end of the row) to restore the default value of false
Was that set to true, and if you changed it to false, does performance improve?
It was set to default, and the font's rendered as expected, but with the huge 'Reflow' time switching back to the tab and setup time on initial page load.
When I read more about this setting, I enabled the check and of course the page loaded super fast as I would expect, but no icons, again as expected.
So it has something to do with the validation, and again, there are no issues on Linux with Tabler. The Tabler ticket is here:
https://github.com/tabler/tabler-icons/issues/476
Still wondering what is different about the windows build that causes all the long load and 'Reflow' issues.
Oh, I see what you're saying. If Firefox tries to use the file instead of ignoring it, that is what causes the delays.
One possible reason for platform or machine differences is that the graphics card drivers are involved in calculating ClearType font anti-aliasing. You could test with hardware acceleration disabled to force Firefox to fall back to older methods and see whether that makes any difference. See: Firefox's performance settings. But that isn't a practical workaround.
To track down precisely what change in Firefox 134 (versus the last working version) is causing the issue, someone would need to use the Mozregression tool and have a simple/quick way to reproduce the problem:
https://mozilla.github.io/mozregression/
(Our security software hates unsigned development builds, so it's hard for me to run myself.)
So, I can not find 128.5.esr1 in the available production releases (what I have on the Rocky9 box) anywhere on the mozregression release dropdown. What version is that equivalent to on the mainline releases?
I'm guessing there is something fundamentally different between the Windows SVG engine and the Linux version.
I'm putzing around to other browsers to see if there are any others experiencing that.
1. Edge - No 2. Vivaldi - No 3. Opera - No 4. Google Chrome - No
I know they are all Chromium. So, I guess it's not fair to compare. I prefer Firefox, of course. So, want to get it fixed. I did not install and compare native ESR as it wanted to create a new profile, and I have a lot of stored passwords in 134. So, not wanting to mess around with the LocalData mess I could get myself into.
My guess is that Firefox 133 and earlier were okay, or you would have noticed this problem last month before you updated to Firefox 134. So maybe it's not necessary to test the ESR release.
When I unzip the file from https://github.com/tabler/tabler-icons/releases/tag/v3.28.1 and open
\webfont\tabler-icons.html
which is a 1.3 MB file, it seems to take forever for Firefox to fill in the icons. I should have timed it. Later, I tested in Chrome and Edge, both initial load and Shift+clicking the reload button to bypass cache, and it takes about 7-8 seconds. Shift+click reloading in Firefox also took 7 seconds. It was much slower recovering from closing the tab and then later reopening it with Ctrl+Shift+T. However, I couldn't replicate the problem of using a different tab causing the page to have to reflow. That might be related to something dynamic about your page versus this static font listing page.
I did not test their own tool demo page. I guess I should time it. Also, based upon the performance data, the reflow on switching tabs is all FireFox, no other JS calls. So, likely the SVG renderer chewing on something inefficiently.
Lastly, we are just now introducing the icons, so it's a completely new issue that only affects Firefox so far, and only on Windows. I used the mozregression tool and went back to June 2024, and then gave up as I had no idea where to stop based on ESR not being on the list.
I would love to upload an animation to show you all the differences. There just does not appear there to be a way to do that.
I guess it could be the renderer triggering some resize events on the page that then double back to the cause the reflow to restart.
I'll dig in a little bit more but again it doesn't affect the other browsers.
When switching tabs, the following call dominates all the timing. Definitely SVG related.
LigatureSubstitutionSubtableHelper::ReadLookupCoverage.
I think this is material to the issue. I'm about to update to their latest release to see if there are any improvements.
Okay, I just updated from Tabler 26.1 to Tabler 28.1 and the problem is resolved. So, it must have had something to do with the SVG files that put Firefox into a tizzy. Tabler seems to be moving quite fast right now though the hang during initial download and processing the fonts is still there, and the warnings below, switching tabs no longer hangs.
downloadable font: GSUB: Bad ligature offset 5813 for ligature 0 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:0) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff2?v3.28.1 downloadable font: GSUB: Failed to parse ligature set 8 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:0) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff2?v3.28.1 downloadable font: GSUB: Failed to parse subtable 0 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:0) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff2?v3.28.1 downloadable font: GSUB: Failed to parse lookup 0 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:0) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff2?v3.28.1 downloadable font: GSUB: Failed to parse lookup list table (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:0) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff2?v3.28.1 downloadable font: GSUB: Failed to parse table (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:0) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff2?v3.28.1 downloadable font: rejected by sanitizer (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:0) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff2?v3.28.1 downloadable font: GSUB: Bad ligature offset 5813 for ligature 0 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:1) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff? downloadable font: GSUB: Failed to parse ligature set 8 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:1) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff? downloadable font: GSUB: Failed to parse subtable 0 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:1) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff? downloadable font: GSUB: Failed to parse lookup 0 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:1) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff? downloadable font: GSUB: Failed to parse lookup list table (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:1) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff? downloadable font: GSUB: Failed to parse table (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:1) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff? downloadable font: rejected by sanitizer (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:1) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.woff? downloadable font: GSUB: Bad ligature offset 5813 for ligature 0 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:2) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.ttf?v3.28.1 downloadable font: GSUB: Failed to parse ligature set 8 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:2) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.ttf?v3.28.1 downloadable font: GSUB: Failed to parse subtable 0 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:2) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.ttf?v3.28.1 downloadable font: GSUB: Failed to parse lookup 0 (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:2) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.ttf?v3.28.1 downloadable font: GSUB: Failed to parse lookup list table (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:2) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.ttf?v3.28.1 downloadable font: GSUB: Failed to parse table (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:2) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.ttf?v3.28.1 downloadable font: rejected by sanitizer (font-family: "tabler-icons" style:normal weight:400 stretch:100 src index:2) source: https://192.168.11.198/cacti/include/tabler/webfont/fonts/tabler-icons.ttf?v3.28.1