Re: Resizing examples

Arg, you had to throw in a Google example!

After changing my what Firefox reports as the user-agent to iPhone, I could open it with the AMP version.

There is all-sorts going on there, but to give a flavour, the main content is in an iframe, and the HTML element has:
position: absolute !important;

The iframe has a fixed height (probably calculated by JavaScript), and it *tries* to reflow when pinch-zooming.

It will take some digging to work out what’s really going on there, I’ll add it to the examples.

Thanks,

-Alastair

From: Jonathan Avila <jon.avila@ssbbartgroup.com>
Date: Tuesday, 24 January 2017 at 20:45
To: LVTF - low-vision-a11y <public-low-vision-a11y-tf@w3.org>, WCAG <w3c-wai-gl@w3.org>
Subject: RE: Resizing examples
Resent-From: LVTF - low-vision-a11y <public-low-vision-a11y-tf@w3.org>
Resent-Date: Tuesday, 24 January 2017 at 20:46


I wanted to throw one more link into the discussion.  Google has this accelerated mobile pages (AMP) program.  It serves up pages that are fluid.  But I’ve had issues with resizing being wonky and pinch zoom causing scrolling to break making the page difficult or impossible to use with pinch zoom.  I see these pages on my iPhone when I search for new stories in Safari using google.com.  A sample link is below.  It seems to open the story in a modal window without changing the page’s url.

https://www.google.com/amp/s/amp.cnn.com/cnn/2017/01/23/europe/trident-missile-failure-theresa-may/index.html


Issues about scrolling (which I think may or may not be related to pinch zoom).
https://productforums.google.com/forum/#!topic/news/ixPneB4vpGk


Jonathan

Jonathan Avila
Chief Accessibility Officer
SSB BART Group
jon.avila@ssbbartgroup.com<mailto:jon.avila@ssbbartgroup.com>
703.637.8957 (Office)

Visit us online: Website<http://www.ssbbartgroup.com/> | Twitter<https://twitter.com/SSBBARTGroup> | Facebook<https://www.facebook.com/ssbbartgroup> | LinkedIn<https://www.linkedin.com/company/355266?trk=tyah> | Blog<http://www.ssbbartgroup.com/blog/>
See you at CSUN in March!<http://info.ssbbartgroup.com/CSUN-2017_Sessions.html>

The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.

From: Alastair Campbell [mailto:acampbell@nomensa.com]
Sent: Tuesday, January 24, 2017 12:20 PM
To: Jonathan Avila; public-low-vision-a11y-tf; GLWAI Guidelines WG org
Subject: Re: Resizing examples

Hi Jonathan,

I’m just changing the subject line as we’re heading off on a tangent that is more to do with Resize content.

I went through the examples below, but first I think the basic point stands, if you have a site that is *not* good for zooming, like this pixel-width test case:
https://alastairc.ac/tests/layouts/pixels.html


That passes 1.4.4 with zooming, but it is rubbish from a low-vision point of view compared to the vast majority of RWD sites.

Anyway, on the examples you sent I resized my browser to 1024px wide, and zoomed in 200%:

http://www.slidesnack.com/templates-examples/online-presentation-examples#1

The presentations are Flash content, so I assume it is using its own heuristic for re-sizing, rather than the browsers. The content around the flash looks fine! If we are covering flash, then I guess we would have to take a ‘mechanism is available’ approach, but then we run into the “OMG Widgets!” problem.

http://guidobouman.github.io/jquery-panelsnap/

Interesting, they use boxes with height: 100% (of the viewport) and overflow-hidden, so expansion gets hidden. The content within each box is then absolutely positioned, so expands out of the box.

Ok, that’s a good one, that would fail 1.4.4. That’s a page demoing a plugin, have you seen it used on real sites?

https://css-tricks.com/examples/ScrollingSidebar/

That’s a simple test case, not intended to be like a real site, it has a very basic body {overflow-x:hidden;},
I’m quite sure Chris Coyer would not do that on a “real” site.


> Another example is floating fixed potion content.
http://www.w3schools.com/jquerymobile/tryit.asp?filename=tryjqmob_toolbars_fixed


Apart from the Google drive icon disappearing, I don’t see a problem with that one? The content in the right box is visible at 200%.

> Header text overlaps content
https://css-tricks.com/persistent-headers/


I don’t see a problem here (Chrome, 1024px wide at 200%). I also looked at the demo, which looked fine:
https://css-tricks.com/examples/PersistantHeaders/ although again it is a demo, and has body{overflow-x:hidden}

Perhaps you mean something like this from the FT? At 400-500% the header is getting very large (proportionally), but still not problematic at 200%
https://www.ft.com/


Cheers,

-Alastair