twentyhq / twenty

Building a modern alternative to Salesforce, powered by the community.
https://twenty.com
Other
20.23k stars 2.24k forks source link

feat: Disable Auto zoom on text input for iphone #8001

Open harshit078 opened 2 weeks ago

harshit078 commented 2 weeks ago

Current behavior

https://github.com/user-attachments/assets/639f5ad7-c662-4c46-b395-d6dd52a82f06

https://github.com/user-attachments/assets/70cc040d-6f46-4427-a965-bd6d8df37b1f

https://github.com/user-attachments/assets/4f2c8a4e-2603-4314-b92d-b7b34f330fe3

Expected behavior

Proposals

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](https://webkit.org/blog/7367/new-interaction-behaviors-in-ios-10/)
- [No input zoom on input](https://thingsthemselves.com/no-input-zoom-in-safari-on-iphone-the-pixel-perfect-way/)
FelixMalfait commented 2 weeks ago

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 commented 2 weeks ago

/award 100

oss-gg[bot] commented 2 weeks ago

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

harshit078 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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

FelixMalfait commented 2 weeks ago

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 commented 2 weeks ago

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

harshit078 commented 2 weeks ago

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?

harshit078 commented 2 weeks ago

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

FelixMalfait commented 2 weeks ago

@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 commented 2 weeks ago

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

Devessier commented 2 weeks ago

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 commented 2 weeks ago

@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 commented 2 weeks ago

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

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 commented 2 weeks ago

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.

https://github.com/user-attachments/assets/255c0926-651d-4695-86a7-cc21e512da33

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 commented 2 weeks ago

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 commented 2 weeks ago

So should we just?

Prevent necessary double-clicking to edit table cells

That should be solved by removing the hover

harshit078 commented 2 weeks ago

@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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 1 week ago

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

harshit078 commented 1 week ago

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 commented 4 days ago

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.

https://github.com/user-attachments/assets/a9dc97f5-e906-4a06-a472-84eeff7e0085

Devessier commented 16 hours ago

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.