NEW233917
HTML elements with tiny scales are rendered but not clickable. 
https://bugs.webkit.org/show_bug.cgi?id=233917
Summary HTML elements with tiny scales are rendered but not clickable.
Michael Herzog
Reported 2021-12-07 01:28:45 PST
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.
Attachments
Add attachment proposed patch, testcase, etc.
Radar WebKit Bug Importer
Comment 1 2021-12-14 01:29:17 PST
<rdar://problem/86457036>
Note You need to log in before you can comment on or make changes to this bug.