reggie3/react-native-webview-quilljs

Editor border extends beyond the phone screen when click

Opened this issue · 3 comments

It is happening only on iOS

I have the same issue
Screenshot 2020-03-27 at 16 55 48
Please help to fix the issue. Happens when focus editor

drbh commented

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.