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.
<rdar://problem/86457036>