Comments (7)
The auto-scaling feature is wonderful. At least, it should be wonderful.
Unfortunately, it’s badly implemented, enough so that it can actively hurt desktop Safari users. In desktop Safari, the rem
unit is dropped to 13px
, regardless of the initial or current viewport size, and authors are given no way to know whether this is a deliberate user preference or not, nor are they given a way to specify a minimum font-size
in the cases where it was not deliberate. It’s also a confusing pattern for authors, since additional font
values like -apple-system-headline
resolve to the same font-size
as -apple-system-body
in iOS and desktop Safari.
If there is a way around these issues in CSS, then I will probably be eager to add this feature, even if it only benefits iOS users.
from sanitize.css.
There is, but its a hack that targets iPad & iOS.
@supports(-webkit-touch-callout:default){ /* iOS and iPadOS, but not Desktop */
:where(:root){font: -apple-system-body}}
}
from sanitize.css.
Better yet, here's a Codepen with updated code. Desktop Safari is targeted instead to just manually reset to 16px as it does in its user-unsettable User Agent Stylesheet. If iOS were targeted instead, then custom font-family stuff needs to be set in 2 different :root areas, which is a pain to maintain. - https://codepen.io/chrislachance/pen/OJpmgrM
Seems like the heaviness of this solution may go against what the goals of Sanitize are, however, so I get it if you don't want to add to the library.
from sanitize.css.
Your work is incredible, @chrislachance.
I’m sad to present some more bad news. If I adjust the text size in iOS and then disable the setting, the text size adjustment is still applied. This feels actively harmful.
I noticed that it’s not just iOS Safari getting this wrong. I noticed that iOS Mail continued to use the disabled text adjustment.
If you have the time and availability, you could make the web better by filing a bug with Apple, and advocating for the change until it happens. Your only reward may be knowing it eventually does the right thing, and the esteem of your fellow developers, like myself, who knew nothing of this until you showed it to me.
from sanitize.css.
Interesting. Can you share a screenshot of the disabled setting? I must have missed that one.
I've already asked Safari iOS to consider fixing this for its browser officially a few days back. (Unless you have secret contacts at Apple :) )
from sanitize.css.
BTW, if you mean the setting shown in this image, it only allows for users to pick larger sizes.
It's not an enable/disable toggle (weird huh?)
from sanitize.css.
To answer your question, yes, I was incorrectly identifying the control as a toggle, and I agree that it’s a weird, unexpected user interface.
I’ve taken the issue to Twitter, in case there are other ideas. I want to know if users can adjust the text size in macOS, to test whether the 1rem
fix is merely disabling the accessibility (similar to how it disables the accessibility in iOS).
https://twitter.com/jon_neal/status/1437917257108271107
from sanitize.css.
Related Issues (20)
- sanitize.css adds an extra dotted outline to focused buttons in Firefox HOT 1
- Pedantic colon placement HOT 1
- Why do we need `text-indent: 0` for the `table`s? HOT 5
- list-style-type:none for <ol> ? HOT 2
- Should set `cursor: pointer` on the `[aria-controls]` elements? HOT 3
- Other npm packages have references pages.css HOT 5
- zero-width space is consuming space in Safari
- Video captions to match body font family HOT 2
- iOS 15 brings up some new default styles HOT 1
- Pseudo-class :where()? HOT 4
- Text cursor not showing on paragraphs
- `nav li::before` breaks flexbox lists
- Touch-action is not in the stylesheet
- Add svg to assets.css
- Is this project alive/maintained? HOT 1
- Update README.md
- Consider removing opinionated tab-size
- Background transparency issue with iframe elements
- Update rule for nested lists in `sanitize.css`
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sanitize.css.