Forced scroll on embeds in mobile Android Chrome

Mobile Chrome will autozoom to any focused input element with a font size of <16px (I can’t find a primary source for that, but it appears to be pretty standard e.g. How to stop zoom in on input focus on mobile devices | by Shekhar K. Sharma | CSS Junction | Medium).

Because the Chat input defaults to 13px, this means that any time a user focuses the chat in an embed, it’ll force a zoom to make the input fill the screen (and in my experience, the focus targeting for an iframe is… spotty, at best. That may be due to my basing height on vh which shifts when the soft keyboard appears, so take that particular slice of the bug with a grain of salt). Anyway, it remains that there is forced zoom on embedded chat on Chrome (on Android; don’t have an iPhone so can’t test a webview).

I have no idea what the resolution would be on this… but it’s a bummer UX regardless. It seems like workarounds are lacking. Anyway, just wanted to report this (it makes my users of my embed sad haha).

Also worth noting that the typical suggested fix of disabling user zoom view viewport configuration is considered a huge accessibility antipattern, so I’m reticent to implement a fix that will marginalize some of my users :pensive:

Any thoughts on a workaround are very welcome!

Thanks so much.

This sounds like a suggestion for uservoice about the embed product that needs to be updated.

https://twitch.uservoice.com/forums/310213-developers

As for a work around, you can’t really modify the embed as it loads externally. You are better off rolling your own chat UI and connecting the user with oauth IMO

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.