Safari における overflow: visible の不具合?
<svg> に overflow: visible を指定すると、 #Safari で中の要素の #TouchEvent が走らない #バグ があるっぽい。ちゃんとした記事は見つけられてないが、いくつか同じ問題にぶつかっている人がいるのは確認した It seems that Safari on ios do not trigger events for overflow elements in Svg.
when a Draggable SVG element with "svg { overflow: visible }", dragged out into the overflow area of the SVG, draggable is not able to drag it. This currently only happens in Safari.
ドラッグできる
https://gyazo.com/1a0776bf3ae43c37a2a503fa25cc92a9
ドラッグできない(元の位置に戻せない、詰み)
https://gyazo.com/eebaae527d281ad3f2f8dea35c4c0c23
現状は青い枠部分が <svg> で、かつ青枠の左上を (0, 0) とする座標系を取っていた(外のグレーの部分は <div>)が、外のグレー部分も <svg> タグにし、グレー部分の左上を (0, 0) とする座標系を取らないとこれは回避できなさそう。