Skip to content
This repository

Cannot zoom text on desktop Safari nor Google Chrome #4218

Closed
pierrickchabi opened this Issue April 26, 2012 · 9 comments

4 participants

Pierrick Chabi Todd Parker Maurice Gottlieb huan086
Pierrick Chabi

While testing accessibility features against jqm I went into this : I cannot zoom text on desktop Safari nor Google Chrome.
I know jqm is mobile-focused but many people use it to built cross-platform apps that also target desktop.

To reproduce it -> open http://jquerymobile.com/test/docs/pages/index.html and try zooming the text or the page, exclusively with browser's menu zooming options or keyboard shortcut. (don't use touchpad pinch nor mouse as they sometime have a different effect from nor shortcut)

The result I get on Mac OSX 10.7.3 are :

  • Opera (Version 11.62 Revision 1347 ) : OK.
  • Firefox (Version 12.0) : OK
  • Google Chrome (Version : 18.0.1025.165) : Only affects the buttons. No effect on the text.
  • Safari for Mac (Version 5.1.4 (7534.54.16)) : No effect at all. (touchpad pinch - and probably mouse trick - does a global zoom and adds scroll bars)
Maurice Gottlieb

Hi!
I've recognized this also with Safari 5.0.5 on Windows but I think it's a browser issue.
If you zoom for example http://jquerymobile.com/test/docs/toolbars/bars-fixed.html, there are
text passages that gets zoomed and other parts not. In code examples even mixed.

Pierrick Chabi
Maurice Gottlieb

Is the example
zoom
the text that is not zoomed, has the <strong>tag set.

Pierrick Chabi

Other input :

Not zoomed :

  • ui-btn-text class
  • all header typos
  • < p >

Zoomed :

  • < code >
Todd Parker

We use pixel values to avoid issues with nesting em-based values so it's up tot eh browser in how to manage the text zooming. This isn't a bug with jQM, more of a difference in how browsers handle the zoom feature.

Todd Parker toddparker closed this April 26, 2012
huan086

The issue is not with using pixel values, but with -webkit-text-size-adjust:none.

There is a bug in desktop webkit browsers in that they do not ignore this setting meant only for mobile https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust

The recommended setting is to set to -webkit-text-size-adjust: 100%, which is safely ignored on desktops. http://blog.55minutes.com/2012/04/iphone-text-resizing/

Pierrick Chabi
Pierrick Chabi
huan086

Problem exists in http://jquerymobile.com/demos/1.2.0-alpha.1/ (still using text-size-adjust: none)
but
http://jquerymobile.com/test/ is OK (using text-size-adjust: 100%)
So don't need to reopen issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.