Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Include `text-size-adjust: 100%;` or not #13

Closed
olach opened this issue Feb 4, 2019 · 4 comments
Closed

Include `text-size-adjust: 100%;` or not #13

olach opened this issue Feb 4, 2019 · 4 comments

Comments

@olach
Copy link

@olach olach commented Feb 4, 2019

I see that text-size-adjust: 100%; is included with the description Fix for iOS Safari. This make it sound that iOS has a text sizing bug, but I think it's a feature to resize text on orientation change.

@tbrown writes in Flexible Typesetting:

A value of 100% prevents type from being resized automatically in iOS when a device’s orientation changes. That might be a problem if a reader expects type to get larger in landscape mode for easier reading.
Personally, I avoid text-size-adjust entirely. It can cause serious accessibility problems, it is sometimes overridden by the aforementioned viewport settings, and browser implementation is inconsistent right now.

If this is going to be included, I think a better description would be used: Prevent type from being resized in iOS when a device’s orientation changes.

@jensimmons

This comment has been minimized.

Copy link
Contributor

@jensimmons jensimmons commented Feb 5, 2019

Ah, this is really helpful info. I think I grabbed that line of code out of another reset-type project without researching it (yet). From what you described, I don't think we want to include this. Resizing text on orientation change sounds like something Apple put there on purpose.

Other people's thoughts?

We / I should test a demo...

@kgcreative

This comment has been minimized.

Copy link

@kgcreative kgcreative commented Feb 5, 2019

I've had to turn it off on multiple projects where I was doing responsive design and making sure that my text size was intentional. It can cause unexpected reflow and positioning bugs if you've taken care to design the text for those sizes/orientations and are hit with a sudden text-zoom.

(Edit: AFAIK, apple included it because a lot of old websites had tiny fonts, and people were switching orientation and zooming in in order to make the text legible, so they included that as default behavior)

@jensimmons

This comment has been minimized.

Copy link
Contributor

@jensimmons jensimmons commented Feb 11, 2019

Reboot (Bootstrap's reset), Sanitize, and Normalize all include some variation of this.

  -ms-text-size-adjust: 100%; 
  -webkit-text-size-adjust: 100%; 
 /* 5. Prevent adjustments of font size after orientation changes in
     IE on Windows Phone and in iOS. */

None of the older resets do. (Makes sense, they are older than the iPhone, but since so many people still use them, those folks are living without this "fix".)

Interesting that none include

  -moz-text-size-adjust: 100%; 
  text-size-adjust: 100%;

They are attempting to target only iPhone and Windows phone.

Browser support is interesting: https://caniuse.com/#search=text-size-adjust. For example, it's in Firefox for Android (prefixed), but not desktop.

The purpose of this property is described here: https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

I made a demo at: https://codepen.io/jensimmons/pen/Jxvarw
On a page by itself at: https://s.codepen.io/jensimmons/debug/Jxvarw (link may expire)

A second demo does not include the viewport metatag (aka, not RWD)
https://codepen.io/jensimmons/pen/PVedyG
https://s.codepen.io/jensimmons/debug/PVedyG

@jensimmons

This comment has been minimized.

Copy link
Contributor

@jensimmons jensimmons commented Feb 11, 2019

Post-testing.......

This does nothing on my iPhone. Nothing. With or without the viewport metatag. There's a note on Can I Use about a bug in Safari 5.1, but every since then, Can I Use reports this as not-supported.

The note on Can I Use says "If the viewport size is set using a element, the -ms-text-size-adjust property is ignored." So it doesn't do anything for Windows Phone either, if a site is build to be responsive.

I think we can safely assume that any website being build today is being built with a viewport metatag, to be responsive or intrinsic. Well, that's not always true, but I don't think this project can help people who are still building fixed-width 960-wide websites.

So, in conclusion, it looks like this does nothing. And isn't needed. And only sticks around in our code because no one has looked into it in years.

text-size-adjust: 100%; /* Fix for iOS Safari */ is wrong.

Ah, the legacy of habits.... well, bubuyeeeee....

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
3 participants
You can’t perform that action at this time.