Bug 233917

Summary: HTML elements with tiny scales are rendered but not clickable.
Product: WebKit Reporter: Michael Herzog <michael.herzog>
Component: UI EventsAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: graouts, hi, mattwoodrow, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: All   
OS: All   

Description Michael Herzog 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.
Comment 1 Radar WebKit Bug Importer 2021-12-14 01:29:17 PST
<rdar://problem/86457036>