Select readonly cells in Chrome for Android (desktop mode) cause browser zoom out

[jimmyye]

Description

Select a readonly cell in Chrome for Android (desktop mode) cause browser zoom out a lot, while selecting an editable cell doesn't.

Steps to reproduce

1. Open https://handsontable.com/features in Chrome for Android.
2. Select "Desktop mode" from the top right menu of Chrome.
3. Select a cell in the third column (Team).

Demo

https://handsontable.com/features

Your environment

• Handsontable version: 4.0
• Browser Name and version:
• Operating System: Android 7.0

[AMBudnik]

I currently do not have any device to test it, there's only one Android phone with 4.4.4 and it works fine. I've also tested it on iOS 11.4 but it works the same.

I will check other devices as soon as there's an opportunity.

[AMBudnik]

I've just checked it on Huawei with Android 7.0 and it is zooming in.

[jimmyye]

First not in "desktop site" mode, and then in "desktop site" mode.

[AMBudnik]

@jimmyye yes, that is exactly what happened in Huawei
Thank you for sharing

[AMBudnik]

Hey @jimmyye

have you tried how it works with v 7.0.2? A very similar issue reported here #5264 has been closed as fixed.

[jimmyye]

It now zooms in to focus the cell.

[AMBudnik]

That's not good either. Thank you for checking and posting.

[wojciechczerniak]

That's not good either. Thank you for checking and posting.

@AMBudnik Why? It zooms the input to make it easier to enter the data. The default behavior for all form inputs in mobile web browsers. The cell is not read-only on the last screencast.

@aninde @AMBudnik Please re-test this issue. A read-only cell should not zoom or scroll. But opening a cell editor should do it.

Context: @pnowak removed editor from read-only cells in #6249. It was released in 7.2.0 if I remember correctly.

[AMBudnik]

IMO the zoom it too big. If we cannot control it then fine, but it looks weird when it pops out like this. I would see this working for a person who's set 200% zoom for the system or turned on options for sight disabilities. Usually, we do not require the chars to be that big.

I do not have any Android devices on me right now but it looks like we have a bug on iOS - the border is missing when I edit the cell.

I tried a couple of versions back (including 6.0.0) but it looks like this on all of them. It's hard to tell if that happened for all the versions before cause that's a quite new device. We definitely should check this on Android.

After adding readOnly to the table settings there's no zooming, as @wojciechczerniak expected.

[wojciechczerniak]

I don't know how big it should be. We can test some other form with inputs/contact form/shopping cart, how close it can zoom there.

Have you checked the missing border on SVG borders? It might be fixed already. Anyway, we need a new issue for it and label it correctly with a v8.0.0-beta2 version.

After adding readOnly to the table settings there's no zooming.

That solves this issue.

[AMBudnik]

It's not completely fixed but definitely there's an improvement, more here #6588

Below are some examples of inputs. They seem to be more subtle.

[wojciechczerniak]

Thank you for the research.

We should check if the hidden input that is positioned near the cell has the correct height/width. Maybe we can tweak this a little. Maybe the input container that's hiding the textarea interferes with the browser logic.