feat: Disable Auto zoom on text input for iphone

[harshit078]

Current behavior

• When typing in an input field across the UI, the page auto zooms in to focus but it makes it difficult as a user to edit and navigate at the same time. For ex- In Phone input field, the country picker dropdown doesn't close even after choosing a country and one has to click outside to close the dropdown.

ScreenRecording_10-21-2024.00-58-06_1.MP4

• Dropdown menu clips through RightDrawer when making a new field

ScreenRecording_10-21-2024.01-00-13_1.mov

• If a user edit a cell, the page scrolls to the end making it difficult to navigate.

ScreenRecording_10-21-2024.09-59-03_1.MP4

Expected behavior

• There should be no auto zoom when typing in a input field and the user should have the ability to zoom itself. Currently the user has to zoom out everytime he has interacted with an input field.

• Dropdown menu should not clip through RightDrawer and should close when opening RightDrawer

• When editing, the page should avoid scrolling to the end and stay at its current position.

Proposals

• Add a function which checks if the device is ios or android and apply maximum-scale=1 property which prevents this behaviour. This behaviour doesn't happen on android and is only limited to ios.

const addMaximumScaleToMetaViewport = () => {
    const el = document.querySelector('meta[name=viewport]');
    if (el !== null) {
        let content = el.getAttribute('content');
        let re = /maximum\-scale=[0-9\.]+/g; // Fixed regex to correctly match
        if (re.test(content)) {
            content = content.replace(re, 'maximum-scale=1.0');
        } else {
            content = [content, 'maximum-scale=1.0'].join(', ');
        }
        el.setAttribute('content', content);
    }
};

const checkIsIOS = () => /iPad|iPhone/.test(navigator.userAgent);

const disableIosTextFieldZoom = () => {
    if (checkIsIOS()) {
        addMaximumScaleToMetaViewport();
    }
};

disableIosTextFieldZoom();

1. Disable the use of AutoFocus- We are currently using Autofocus in a lot of text inputs in our code which focus on input field while editing making it easier for user. Ios makes it more accessible by auto zooming in the input field for ease of convience.

2. Font Size- We are currently using font-size: ${({ theme }) => theme.font.size.sm}; in a lot of places along with 16px in some places. One of the major reasons for auto zoom in ios is the font size being smaller than 14px. By allowing 16px to be the standard font across all the webapp, it would significantly contribute to this issue.

• Ios 10 which introduced Auto zoom
• No input zoom on input

[FelixMalfait]

Great point! Do we really need to check for the device type or can't we just apply maximum-scale=1 all the time? what would be the impact?

Agree the app is almost un-usable on iOS because of this. Also the fact that you have to click twice on chip/cell is frustrating on mobile.

[FelixMalfait]

/award 100

[oss-gg]

Awarding harshit078: 100 points 🕹️ Well done! Check out your new contribution on oss.gg/harshit078

[harshit078]

Great point! Do we really need to check for the device type or can't we just apply maximum-scale=1 all the time? what would be the impact?

Agree the app is almost un-usable on iOS because of this. Also the fact that you have to click twice on chip/cell is frustrating on mobile.

• @FelixMalfait Applying maximum-scale=1 is one of the most common and most used answer for this issue but the drawback of it is that it withdraws the control to manually zoom in or out on android. As a result, Android users won't be able to pinch in-out while using the app.

• For android, the webapp works perfectly and has no such issue as a result we need to have a check for ios and apply consider applying settings for these.

• For ex- RecordInlineCellEditMode.tsx uses font-size: 14px which is also huge contributor to this issue. If we font-size to 16px on these fields, we can achieve the desired result.

[FelixMalfait]

I actually think disabling the pinch-to-zoom would be nice as it's something you do on the web but not something you do on an app so it could help give a more "native" feeling.

I agree we could consider changing fonts and more but I guess that would be part of a bigger redesign, we discussed it with @Bonapara but said it wouldn't be for short-term

[harshit078]

@FelixMalfait But this would still give the access to pinch in and out for ios users ?

[FelixMalfait]

I think we could add <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> it would improve the behavior for everyone, no?

[FelixMalfait]

https://malyshev-pro.medium.com/5-easy-ways-to-make-your-mobile-web-app-feel-more-native-368a8d982f9c good article

[harshit078]

I think we could add <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> it would improve the behavior for everyone, no?

• This definitely works but this does disable user zoom on Android devices and in Chrome on iOS

[harshit078]

https://thestateofmatter.com/blog/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields

[FelixMalfait]

@harshit078 yes I think it's great that it disables zoom on mobile, a native mobile app doesn't allow you to zoom

Also we should remove the :hover on mobile (not with the script that blindly replaces everything given in the article but by targeting the few places where the :hover really annoying and doing it in the styled component)

[harshit078]

@FelixMalfait I agree to your point on removing hover for mobile viewports\

[Devessier]

Turning off zooming harms accessibility, and I think we must avoid it. See https://www.boia.org/blog/web-accessibility-tips-do-no-disable-zooming-yes-even-on-mobile.

To circumvent iOS's auto zoom-in on focused inputs, I often see people setting a default 14px size on desktop and 16px on mobile. I understand that making global CSS changes is not easy.

We can think about quick wins.

[harshit078]

@Devessier I agree to your point. Making font-size:16px would in all text-input field would be a fix. But can't we set maximum-scale=1 for iPhones and iPad only ? Considering that android doesn't need maximum scale as it works perfectly fine and wouldn't take natural scroll ability from the users.

[FelixMalfait]

See also: touch-action: pan-x pan-y; to disable pinch to zoom which is annoying and not something we want
https://stackoverflow.com/questions/4389932/how-do-you-disable-viewport-zooming-on-mobile-safari?answertab=trending#tab-top

• it seems that the trick we discussed doesn't work on iOS anymore since iOS10!

I think accessibility on mobile is not a priority at this point as we need to fix accessibility on desktop first, and have a basic working app on mobile first (the auto-focus makes it unusable in its current auto-focus state right now, even for non-disabled users)

[Devessier]

That's great that you brought all these issues to the table, @harshit078. I may lack context, so feel free to share previous discussions with me 😄

Prevent iOS from automatically zooming in

I'm on iOS 16.7 – yes, I know... – and I tried to update the viewport meta to what you suggested:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=none">

It prevents the browser from automatically zooming in when an input is focused, but I'm still able to zoom in and out, which was my concern. From a UX and accessibility point of view, we can go with this solution specifically for iOS browsers, provided we test it on more recent iOS versions.

RPReplay_Final1730223490.MP4

Technically, I tested the function addMaximumScaleToMetaViewport you suggested, and it worked well. I think it's essential that this script runs as soon as possible when the application loads.

I would either put it inside a script[defer] in the index.html file or put it in the root index.ts file.

We should double-check the condition we'll use to apply this configuration. Usually, relying on user agents is unsafe. It might be the best option we have.

Prevent hover styles on mobile

There are media queries to detect whether the current device supports hovering. I would prefer using them instead of relying on a viewport media query.

See https://www.smashingmagazine.com/2022/03/guide-hover-pointer-media-queries/.

Prevent necessary double-clicking to edit table cells

We can work on solving this rather dull issue. Has it already been discussed somewhere? I would love to check that.

[FelixMalfait]

Hey thanks @Devessier! could you please raise a quick PR with pragmatic/simple fixes based on what your think is best?
Typically addMaximumScaleToMetaViewport seems overly complex, as mentioned I think we want to have the same code running on iOS/Android, I don't think adding the viewport on Android is an issue. Let's do anything simple that improves the experience for masses and avoid anything too complex.

[FelixMalfait]

So should we just?

• Add <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=none">
• Wrap the "hover" in media queries

Prevent necessary double-clicking to edit table cells

That should be solved by removing the hover

[harshit078]

@Devessier could you please check if the ability to zoom in-out manually is there for android devices when using -
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=none">
One of the only concern with this solution is that it takes away accessibility zoom from users in android.

[FelixMalfait]

I disagree with the BOIA article. There are accessibility tools like VoiceOver on mobile that are purposely made for the native experience. Native apps, even the official one like for example the play store, don't allow "pinch to zoom". So I don't think we absolutely have to allow it if we can avoid it. There will be other ways to make the app more accessible that won't hurt the experience for all (as you say we can later work on a larger font, etc.)

[Devessier]

Native apps and websites have different expected UX. I don't know much about accessibility on native mobile applications, but I assume that there are device settings to circumvent the impossibility of zooming in. Being able to zoom in is a requirement for many people, so there is necessarily an option for them to do so. Furthermore, I think Apple reviewers take care of testing accessibility essential criteria.

The Web platform offers way more freedom—and that's awesome—but it's also easy to be harmful. My rule of thumb is to be careful when overriding a browser's default behavior. Disallowing zoom-in is considered a bad practice, and I often find myself zooming in on websites, so I'm a bit reluctant to this idea.

We can settle on the less destructive option. It seems that the viewport setting mentioned above doesn't prevent zooming on iOS while fixing the original zooming bug when the user focuses an input. We should triple-check that it works properly on other people's iPhones. Adding it only to iOS, even though that's hacky, could be our best temporary solution.

I understand the urge to improve mobile UX, but introducing a bad practice should only be acceptable if we minimize its impact and are all okay that we will have to refactor it.

[Bonapara]

@FelixMalfait, you want to fully remove the pinch to zoom? Not just deactivate the "auto-zoom"?

[harshit078]

I would like to add one more point to this discussion is that following the recent trend, iPads have replaced many laptops and are the main machine for many users. Targeting both iPhone and specially iPad is crucial as having to zoom in and out on a large device screen is essential for better readability from a general perspective.

[harshit078]

It is also seen that wherever DropdownMenuSearchInput is used, there is no auto zoom to the text input field. However DropdownMenuSearchInput usesfont-size:14px; as compared to the conventional 16px.

ScreenRecording_11-08-2024.13-15-34_1.MP4

[Devessier]

Thanks for your research, @harshit078.

I suggest setting a max zoom only for iOS devices to move on this issue. This setting isn't causing accessibility issues but fixes the unwanted zoom effect. I can propose a PR to implement it in the upcoming days.

[Devessier]

I suggested a change here for the iOS auto zoom: #8477.

We mentioned the bug on iOS that makes it necessary to click twice on a RecordTable cell to open it. I created a separate issue to track this bug: twentyhq/core-team-issues#178.