Cannot zoom text on desktop Safari nor Google Chrome #4218

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

Projects

None yet

4 participants

@pierrickchabi

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)
@MauriceG

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.

@pierrickchabi
@MauriceG

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

@pierrickchabi

Other input :

Not zoomed :

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

Zoomed :

  • < code >
@toddparker

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.

@toddparker toddparker closed this Apr 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/

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