Bug 149826 - Input type="range" inside of SVG element with transform:translate has invalid thumb offset
Summary: Input type="range" inside of SVG element with transform:translate has invalid...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: SVG (show other bugs)
Version: WebKit Nightly Build
Hardware: Unspecified OS X 10.11
: P2 Normal
Assignee: Nobody
URL: http://codepen.io/andrewray/pen/RWVGZL
Keywords: BrowserCompat, InRadar
: 273174 (view as bug list)
Depends on:
Blocks:
 
Reported: 2015-10-05 18:47 PDT by Andy
Modified: 2024-05-01 05:25 PDT (History)
6 users (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Andy 2015-10-05 18:47:40 PDT 
An input type="range" element inside an svg element that has a transform:translate set has an invalid thumb position on drag. Specifically the thumb does not take into account the x offset of the transform. You can view that here:

http://codepen.io/andrewray/pen/RWVGZL

You can also see in the CodePen that it does not apply to CSS elements. This bug appears to affect Chrome and Safari but not Firefox.

Related StackOverflow question: http://stackoverflow.com/questions/32960248/svg-transformtranslate-breaks-input-range-offset

There's another bug https://bugs.webkit.org/show_bug.cgi?id=22109 with a similar title but on further inspection it's not related to this case.
Comment 1 Ahmad Saleem 2023-01-20 08:00:13 PST 
I am able to reproduce this bug in Safari Technology Preview 161, while Chrome Canary 111 and Firefox Nightly 111 works fine.

BUG -> If you try to drag (of SVG in Green Container), the mouse selection is behind actual thumb or slider center point.
Comment 2 Radar WebKit Bug Importer 2024-02-08 15:27:29 PST 
<rdar://problem/122587329>
Comment 3 Ahmad Saleem 2024-05-01 05:25:14 PDT 
*** Bug 273174 has been marked as a duplicate of this bug. ***