Closed Bug 999495 Opened 10 years ago Closed 8 years ago

Priceonomics.com - Unable to zoom in/out on Firefox Android due to viewport tag

Categories

(Web Compatibility :: Site Reports, defect)

All
Android
defect
Not set
normal

Tracking

(Not tracked)

RESOLVED WORKSFORME

People

(Reporter: bugs, Unassigned)

References

()

Details

(Whiteboard: [contactready] [country-us] [html])

Encountered this when trying to read http://priceonomics.com/how-americans-hate-each-other/ (a set of graphs lacking in population data) and trying to zoom in/out on the page to get a better view of the charts.

Bit of input from IRC:
08:09 <@mfinkle> nemo, the priceonomic site uses a viewport meta tag with user-scale set
08:12 < esawin> mfinkle: it doesn't set user-scalable=no though, just initial-scale, am I missing something?

Happens on the entire site though, tested in nightly and stable on my Nexus 5, esawin confirms as well.
Matt do know the correct behavior here?
Flags: needinfo?(mbrubeck)
OS: Other → Android
Hardware: Other → All
This site has two viewport tags. The second one reads:

<meta name="viewport" content="width=319, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

If users really want to scale anything, they should enable Android's "zoom anything" setting in the accessibility options.
Ugh. How evil.  If they are going to do stuff like that they should make sure their content actually fits/displays, like those charts that I have to pan to view the image.
Well. Thanks. Invalid I guess.
Moving to evangelism to try to get them to fix their content.
Assignee: nobody → english-us
Component: Graphics, Panning and Zooming → English US
Flags: needinfo?(mbrubeck)
Product: Firefox for Android → Tech Evangelism
Version: Firefox 28 → unspecified
Thanks Kats, moving to mobile component.
Assignee: english-us → nobody
Component: English US → Mobile
Summary: Unable to zoom in/out on priceonomics website → Priceonomics.com - Unable to zoom in/out on Firefox Android
Summary: Priceonomics.com - Unable to zoom in/out on Firefox Android → Priceonomics.com - Unable to zoom in/out on Firefox Android due to viewport tag
Whiteboard: [contactready]
On the home page, they got two subsequent meta name viewport 

<meta name="viewport" content="width=320, initial-scale=0.5">
<meta name="viewport" content="width=319, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

On the article page,
http://priceonomics.com/how-americans-hate-each-other/ They have this markup for the graphs. I don't think the issue is due to the meta viewport but more to the width and height of the graphs.

<div id="chart-0" style="width: 800px; height: 500px; position: relative;">
    <div dir="ltr" style="position: relative; width: 800px; height: 500px;">
        <div aria-label="A chart." style="position: absolute; left: 0px; top: 0px; width: 100%; height: 100%;">
            <svg aria-hidden="true" aria-label="A chart." style="overflow: hidden;" height="500" width="800">
                <defs id="defs"></defs>
                <rect fill="#ffffff" stroke-width="0" stroke="none" height="500" width="800" y="0" x="0"></rect>

      [CUT FOR BREVITY] 


            </svg>
            <div style="position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden;" aria-label="A tabular representation of the data in the chart.">
                <table>

      [CUT FOR BREVITY] 

                </table>
            </div>
        </div>
    </div>
    <div aria-hidden="true" style="display: none; position: absolute; top: 510px; left: 810px; white-space: nowrap; font-family: Sans Serif; font-size: 14px; font-weight: bold;">19.7 (19.7%)</div>
    <div></div>
</div>

The SVG graph is entirely defined in terms of absolute coordinate which are wider than the viewport. It's happening on a small size window on the desktop (which is not sensitive to meta viewport)



For example, pages with images show without issues. 
http://priceonomics.com/america-is-becoming-less-religious-secular/
Whiteboard: [contactready] → [contactready] [country-us] [html]
I'm inclined to close this as worksforme.


About meta viewport, I understand this is a usability issue for some people. But it works the same everywhere (Chrome, Safari, etc.) So it's an unfortunate business/design decision. Many sites online have unfortunately opted for the same choices.

on Comment #6 The SVG graph is now working.
Status: NEW → RESOLVED
Closed: 8 years ago
Resolution: --- → WORKSFORME
Product: Tech Evangelism → Web Compatibility
Component: Mobile → Site Reports
You need to log in before you can comment on or make changes to this bug.