Topic: mdb.css overrides SVG touch-action

mpcooke4 pro asked 3 years ago

Expected behavior

When on a webpage containing an SVG element I expect to still be able to scroll the page up and down on a mobile device with my finger even if I happen to put my finger on the SVG element.

Actual behavior

By default MDB.css is setting touch-action to none, including on SVG's rendered by third party frameworks. This results in any section of a page with SVG's to have dead spots where the user can't finger scroll on mobile.

I expect now I've finally tracked this down it will be easy to work around, but as a default in MDB it's probably not a good idea to do this as it kills off mobile scrolling on all SVG elements and generally users expect drag scrolling to work on any part of a scrollable web page. In fact if the graph is large, users may think the webpage has crashed if finger scrolling is broken because the behaviour is very unusual on scrollable webpages.

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB React
  • MDB Version: 5.0.1
  • Device: Iphone / Ipad
  • Browser: mobile safari
  • OS: Ios
  • Provided sample code: No
  • Provided link: No