font-size misreports SVG text nodes sized by viewBox

GoogleChrome / lighthouse

Automated auditing, performance metrics, and best practices for the web.

https://developer.chrome.com/docs/lighthouse/overview/

Apache License 2.0

28.22k stars 9.35k forks source link

font-size misreports SVG text nodes sized by viewBox #11286

Open frogtd opened 4 years ago

frogtd commented 4 years ago

Provide the steps to reproduce

Run LH on https://www.frogtd.com/ as mobile

What is the current behavior?

It says that my font is to small (0.667px, SEO section) which is the set size in the svg, but the svg scales to be much larger.

What is the expected behavior?

It says nothing.

Environment Information

Affected Channels: CLI, DevTools, Extension, haven't tested Node.
Lighthouse version: 6.2.0
Chrome version: 86.0.4229.0
Node.js version: v14.8.0
Operating System: Pop!_OS 20.04 LTS x86_64

Related issues

paulirish commented 3 years ago

@frogtd thanks for reporting! this is useful.

The example page has since changed, but I recreated what it was before: https://output.jsbin.com/lebimiwida/1/quiet

our bad results:

Indeed the captureSnapshot payload gives us font-sizes for these svg <text> nodes in the svg viewbox'd dimensions. (window.getComputedStyle returns the same numbers)

It's not trivial to identify that these text nodes are within an SVG (from the snapshot). So our choices here are limited.

Potherca commented 3 years ago

I am having a similar issue... Is there a way to tell lighthouse that the text-size is okay for a specific element? Or have it ignore inline-svg?