1725204 - getScreenCTM doesn't play well with CSS transform

Status: RESOLVED DUPLICATE of bug 1610093

(Firefox :: Untriaged, defect)

Description

[Erik Demaine]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.131 Safari/537.36

Steps to reproduce:

1. Open http://jsfiddle.net/edemaine/vLjd1pa7/6/
2. Move cursor over yellow box

This fiddle is a simple example of an <svg> element within a <div> that has a scale(1.5) transform. It then tries to translate mouse coordinates into SVG coordinates via SVGSVGElement's getScreenCTM method. It's forked from an older fiddle for an older (fixed) Firefox SVG bug: http://jsfiddle.net/sqfzD/

Actual results:

• Drawn box does not track cursor. It seems to move at 1.5x the speed (matching the scale).
• "svg position" coordinates do not match at labeled coordinates (e.g. 250/250 in top left)

Expected results:

• Drawn box should track cursor
• "svg position" coordinates should match at labeled coordinates (e.g. 250/250 in top left)
• This is important for building interactive SVG applications, for mapping mouse events into SVG coordinate space.

This works in Chrome, though it was an old Webkit bug: https://bugs.webkit.org/show_bug.cgi?id=96361

Comment 2

[Erik Demaine]

Thanks for the reference, and sorry for missing it!