I am trying to create a scrollable element inside an svg foreignObject.
Currently, I have a working implementation that works like this
(fullscreen result here). Whilst it does work correctly on desktop (chrome, firefox, and most browsers I tried), and mobile (only firefox), it does not work on mobile chrome (and webview).
Here is what it looks like on chrome mobile.
It seems related to the svg scale, because here I am scaling my (originally 300px tall) svg to a 700px height. When keeping the original size, this issue does not occur.
Note that this also occur using Device mode in chrome dev tools.
Here jsfiddle doesn’t seem to include a viewport meta tag, but the bug is there regardless.
Am I doing it wrong ? Is there any workaround/cleaner solution ? Is this a chrome bug ?