Skip to content

Commit

Permalink
Add more accessible font to prevent autozoom on iOs (ParkingReformNet…
Browse files Browse the repository at this point in the history
…work#181)

See: ParkingReformNetwork#177

IOs on mobile autozooms for fonts in input elements < 16px for
accessibility reasons.

This issue does not show up in devtools, use https://ngrok.com/ to try
this out on your mobile phone.

If you don't have an iphone please test with your android or other
smartphone (if you have one) as this would be useful data as well.
  • Loading branch information
JamesLowenthal authored Apr 6, 2024
1 parent 096b586 commit fcbee08
Showing 1 changed file with 9 additions and 0 deletions.
9 changes: 9 additions & 0 deletions src/css/_header.scss
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,15 @@ header {
height: 40px;
}

.choices__input {
/*
* This is necessary to prevent autozoom on iOS
* for accessibility reasons. See:
* https://weblog.west-wind.com/posts/2023/Apr/17/Preventing-iOS-Safari-Textbox-Zooming
*/
font-size: 16px;
}

.choices__list--dropdown,
.choices__list[aria-expanded] {
z-index: 1001;
Expand Down

0 comments on commit fcbee08

Please sign in to comment.