SVG转换：转换中断输入范围偏移

Question

我发现了SVG和转换的问题：使用样式<input type="range" />翻译<g>内的transform:translate()会使拖动句柄无效。您可以在this CodePen中清楚地看到错误。

屏幕截图：与鼠标相比，范围滑块拇指位置错误。它没有得到变换的偏移：翻译风格。

非SVG标记不会发生此问题。您可以在CodePen中看到它在常规div中工作。

这似乎发生在Chrome和Safari中，但不是Firefox。

这是一个浏览器错误吗？我一直在搞乱，但无法找到解决方法。如何让我的拖动手柄相对于鼠标正确定位？