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

Hi,

Thanks for sharing this page link (
http://jquerymobile.com/test/docs/toolbars/bars-fixed.html) with mixed
texts.

Tested it and got this, on Chrome on Mac :

Same bad behaviour on Safari. Perfect zooming on Opera and Firefox.
Will digg a bit to find the properties that make some of jqm typos fully
zoom-compliant or not...

On Thu, Apr 26, 2012 at 12:57 PM, Maurice Gottlieb <
reply@reply.github.com

wrote:

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.


Reply to this email directly or view it on GitHub:
#4218 (comment)

@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
huan086 commented Aug 4, 2012

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

Thanks, I will test it.

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/


Reply to this email directly or view it on GitHub:
#4218 (comment)

@pierrickchabi

I will let you know as soon as I check it again : within 2 days.

On Mon, Aug 6, 2012 at 4:06 PM, Scott Jehl <
reply@reply.github.com

wrote:

In our current codebase, we're already using 100%, not none, as it was
in older builds. Are you seeing the problem in the latest version?


Reply to this email directly or view it on GitHub:
#4218 (comment)

@huan086
huan086 commented Aug 7, 2012

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