Open harshit078 opened 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.
/award 100
Awarding harshit078: 100 points 🕹️ Well done! Check out your new contribution on oss.gg/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.
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
@FelixMalfait But this would still give the access to pinch in and out for ios users ?
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?
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 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)
@FelixMalfait I agree to your point on removing hover for mobile viewports\
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.
@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.
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)
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 😄
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.
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/.
We can work on solving this rather dull issue. Has it already been discussed somewhere? I would love to check that.
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.
So should we just?
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=none">
Prevent necessary double-clicking to edit table cells
That should be solved by removing the hover
@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.
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.)
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.
@FelixMalfait, you want to fully remove the pinch to zoom? Not just deactivate the "auto-zoom"?
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.
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
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.
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
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
maximum-scale=1
property which prevents this behaviour. This behaviour doesn't happen on android and is only limited to ios.const checkIsIOS = () => /iPad|iPhone/.test(navigator.userAgent);
const disableIosTextFieldZoom = () => { if (checkIsIOS()) { addMaximumScaleToMetaViewport(); } };
disableIosTextFieldZoom();