233917 2021-12-07 01:28:45 -0800 HTML elements with tiny scales are rendered but not clickable. 2023-04-20 10:42:10 -0700 1 1 1 Unclassified WebKit UI Events Safari 15 All All NEW InRadar P2 Normal --- 1 michael.herzog webkit-unassigned graouts hi mattwoodrow simon.fraser webkit-bug-importer zalan oldest_to_newest 1820936 0 michael.herzog 2021-12-07 01:28:45 -0800 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. 1823935 1 webkit-bug-importer 2021-12-14 01:29:17 -0800 <rdar://problem/86457036>