Editor border extends beyond the phone screen when click
Opened this issue · 3 comments
It is happening only on iOS
This is a known issue with iOS Webviews. The fix is to inject JS into the Webview to stop it from zooming.
const iosZoomFix = "const meta = document.createElement('meta'); " +
"meta.setAttribute('content', 'width=device-width, initial-scale=1, maximum-scale=1, user-scalable=1'); " +
"meta.setAttribute('name', 'viewport'); " +
"document.getElementsByTagName('head')[0].appendChild(meta); " +
"true; ";
then you inject this JS in where the webview is rendered here
<WebView
injectedJavaScript={iosZoomFix}
...
I've used this as a quick fix in a personal project and it works without issue. However I'll open a PR soon and hopefully it gets merged to master
**got the idea and js script from - https://stackoverflow.com/questions/44625680/disable-zoom-on-web-view-react-native
I haven't tried this yet, but if this works, can someone commit this fix? I saw this as well. I had a quick fix by modifying: node_modules/react-native-webview-quilljs/assets/index.html :
<meta name="viewport" content="width=device-width,initial-scale=.85, maximum-scale=.85"
But this seems much better.