We have a wide image (a colour palette) that doesn't fit on mobile, so we placed the image in a container with horizontal scroll bar. It works everywhere except for iOS and Safari. When the user starts dragging from a clickable area of the image using these browsers, the container doesn't scroll. However, when the user starts dragging from a non clickable area, the container scrolls properly. If I remove the map completely, the container scrolls fine as well.
Is there a workaround for this bug? Or we need to replace the implementation with SVG or absolutely positioned elements on top of the image?
We ended up with absolutely positioned divs on top of the image and it works great.