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 · 6 comments
Closed

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

olach opened this issue Feb 4, 2019 · 6 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
Copy link
Owner

@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
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 jensimmons added philosophical to do labels Feb 5, 2019
@jensimmons
Copy link
Owner

@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
Copy link
Owner

@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....

@jensimmons jensimmons removed to do philosophical labels Feb 12, 2019
@rafgraph
Copy link

@rafgraph rafgraph commented Jun 5, 2021

Hi @jensimmons, I don't think this is correct. -webkit-text-size-adjust still controls text inflation on iOS Safari (tested on iPhone 12Pro Max, iOS Safari v14 latest). In your code pen demo, https://codepen.io/jensimmons/pen/Jxvarw, if you either always apply or not apply the text-size-adjust property you will see the text inflation difference when rotating the device (instead of applying it to alternating paragraphs). It seems like when applying it to alternating paragraphs, iOS Safari will apply it to all paragraphs.

@jonathantneal
Copy link
Contributor

@jonathantneal jonathantneal commented Jul 12, 2021

You are right, @rafgraph. This can be observed in a landscape orientation with the following markup:

<input id="text-size-adjust" type="checkbox" />
<label for="text-size-adjust">Toggle text-size-adjust</label>

<p>The text-size-adjust CSS property controls the text inflation algorithm used on some smartphones and tablets.</p>

<style>
#text-size-adjust:checked ~ p {
	-webkit-text-size-adjust: 100%;
}
</style>

See: https://cdpn.io/jonneal/debug/OJmbWQr

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

No branches or pull requests

5 participants