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

Cannot zoom text on desktop Safari nor Google Chrome #4218

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

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

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Apr 26, 2012

Contributor

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.

Contributor

MauriceG commented Apr 26, 2012

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

This comment has been minimized.

Show comment
Hide comment
@pierrickchabi

pierrickchabi Apr 26, 2012

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)

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

This comment has been minimized.

Show comment
Hide comment
@MauriceG

MauriceG Apr 26, 2012

Contributor

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

Contributor

MauriceG commented Apr 26, 2012

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

@pierrickchabi

This comment has been minimized.

Show comment
Hide comment
@pierrickchabi

pierrickchabi Apr 26, 2012

Other input :

Not zoomed :

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

Zoomed :

  • < code >

Other input :

Not zoomed :

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

Zoomed :

  • < code >
@toddparker

This comment has been minimized.

Show comment
Hide comment
@toddparker

toddparker Apr 26, 2012

Contributor

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.

Contributor

toddparker commented Apr 26, 2012

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

This comment has been minimized.

Show comment
Hide comment
@huan086

huan086 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/

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

This comment has been minimized.

Show comment
Hide comment
@pierrickchabi

pierrickchabi Aug 4, 2012

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)

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

This comment has been minimized.

Show comment
Hide comment
@pierrickchabi

pierrickchabi Aug 6, 2012

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)

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

This comment has been minimized.

Show comment
Hide comment
@huan086

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

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