Bug 233917 – HTML elements with tiny scales are rendered but not clickable.

• Component: UI Events
• Status: NEW

[Michael Herzog]

The three.js project provides a renderer for representing simple 3D scenes via HTML/CSS by using properties like "transform" or "perspective".

A user reported us that small scaled HTML elements are correctly rendered but it's not possible to receive pointer events when attaching event listeners (see https://github.com/mrdoob/three.js/issues/22964).

I've isolated the issue in a small HTML/CSS only live example: https://jsfiddle.net/9yposagq/2/

You have to find the small red rectangle in the viewport first. Latest Chrome or Firefox detect a click on the rectangle but not Safari.

The transformation matrix used in the demo is: matrix3d(0.002, 0, 0, 0, 0, 0.002, 0, 0, 0, 0, 0.002, 0, 0, 0, 0, 1);

Interesetingly, if you slightly increase 0.002 to 0.003, the problems disappears. It seems there is some sort of treshold or rounding in place.

[Radar WebKit Bug Importer]

<rdar://problem/86457036>