Tick labels are not rendered in legacy Edge on v3.2

[aalyokhin]

Hey guys. After updating to latest v3 (3.2) from v3.beta-6 I've got issues in legacy Edge 16-18, which unfortunately have to be supported on our project. I'm totally aware that the support has been dropped, but still trying and hoping to restore full functionality.

Missing resetTransform canvas method was easily polyfilled and I was able to see the charts again - no issue with this. But now there's this:

As you can see tick labels are missing.

Expected Behavior

Tick labels are rendered.

Current Behavior

Tick labels are not rendered in Edge 16-18.

Possible Solution

I would be very grateful for a hint to which direction should I move with this, as it's totally unclear. I've discovered that now there's universal method for text rendering and it should really work, as scale titles and tooltips are working as they should. But tick labels are not, which is really confusing. It is possibly an issue with TextMetrics or some other thing?

Steps to Reproduce

Unfortunately it's not an easy job to make a reproducible example in CodePen which would work in legacy Edge. I wasn't able to make it work after selecting Babel JS preprocessor, still getting errors. I was also trying with Codesandbox but it looks like they do not support that Edge versions at all, getting 'Could not fetch dependencies, bla bla...' in the Edge.
Anyway, I'm almost sure that it would be hard to find a developer with this browser on his development machine nowadays to reproduce it, even if there was working CodePen.

Thank you in advance for looking into this.

Environment

• Chart.js version: 3.2.0
• Browser name and version: Microsoft Edge 41.16299.15.0, Microsoft EdgeHTML 16.16299

[kurkle]

I'm totally aware that the support has been dropped

And still you filed it as a bug. 🤯

Anyway, this is probably what fails:

Chart.js/src/helpers/helpers.canvas.js

Lines 354 to 366 in 9885126

	/**
	* Now that IE11 support has been dropped, we can use more
	* of the TextMetrics object. The actual bounding boxes
	* are unflagged in Chrome, Firefox, Edge, and Safari so they
	* can be safely used.
	* See https://developer.mozilla.org/en-US/docs/Web/API/TextMetrics#Browser_compatibility
	*/
	const metrics = ctx.measureText(line);
	const left = x - metrics.actualBoundingBoxLeft;
	const right = x + metrics.actualBoundingBoxRight;
	const top = y - metrics.actualBoundingBoxAscent;
	const bottom = y + metrics.actualBoundingBoxDescent;
	const yDecoration = opts.strikethrough ? (top + bottom) / 2 : bottom;