Hey all, got an update from the team on this. It happens when a mobile browser detects on a tap event that the form needs to be zoomed in for the customer:
-
Could be too large or a non-responsive page
-
Could be font size is too small (16px or 18px is baseline)
- We’re 16px
It can be solved by adjusting page size, or disabling zooming with a viewport change or style change.
-
Viewport change will need to be from the base of your website.
-
Setting the style of the iframe body or input to
touch-action:nonestops the issue (Disable’s swipe zoom and touch zoom)
We recommend:
-
Add
maximum-scale=1to your viewport. -
Ex. Add
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1"> -
This will disable all zooming (or limit it depending on the
maximum-scalevalue) -
Add a style
touch-action: noneto the container that holds the SDK iframe -
Ex.
<div class="sq-container" style="touch-action: none">Iframe_rendered_here</div> -
This will disable swipe zoom and touch zoom on this element. Better than disabling it on the whole page.
-
Adjust the web page to a more responsive width and height styling.
