We're encountering an issue with a wide image (a colour palette) that is too large for mobile screens, so we decided to place the image in a container with a horizontal scroll bar. This solution works perfectly on most browsers, but not on iOS and Safari. The problem arises when users attempt to drag the image from a clickable area - the container fails to scroll. However, if users initiate dragging from a non-clickable area, the scrolling functions as intended. Interestingly, once we remove the map entirely, the container scrolls without any issues.
Are there any potential workarounds for this bug? Or should we consider replacing our current implementation with SVG or absolutely positioned elements layered on top of the image?