1030711 - nyt.fi - Content with small text un-zoomable, so it is unreadable

Status: RESOLVED FIXED

(Web Compatibility :: Site Reports, defect)

Description

[Olli Pettay [:smaug][[e-mail]]]

http://nyt.fi/a1305840729465 is an example where text is _very_ small when
loaded in Gaia browser, and for some reason zooming is disabled in this case.

The small-text issue shows up pretty often in various sites, and the issue was there
in b2g 1.3 and 1.4, and still in 2.1 (testing on Flame)

Comment 1

[Kartikaya Gupta (email:[e-mail])]

Meta viewport appears to be the same in Fennec and on B2G:
width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0

I guess we're not respecting the initial-scale for some reason.

Comment 2

[Kartikaya Gupta (email:[e-mail])]

Actually, if I log the viewportInfo string at the start of http://mxr.mozilla.org/mozilla-central/source/content/base/src/nsContentUtils.cpp?rev=84bd8d9f4256#5211 I get this:

07-24 10:24:17.779 I/Gecko   ( 3116): viewport content is user-scalable=no

So actually we're just respecting that meta-viewport tag. The thing I got in comment 1 was based on my loading the page in desktop using B2G browser UA spoofing, but maybe that doesn't work for this website? They might be looking at other HTTP headers or something, not sure. And inspecting browser tabs in the App manager doesn't seem to work so I can't inspect the DOM and check directly.

Comment 3

[Olli Pettay [:smaug][[e-mail]]]

I've seen it several times in various web forums that some comments are shown using tiny fonts and some
a lot larger, and the whole page is un-zoomable. Don't we have some magical font-scaling thing?
Does that work somewhat randomly perhaps?

Comment 4

[Kartikaya Gupta (email:[e-mail])]

Yeah, we have font inflation according to the b2g prefs file is enabled in b2g (except for the root process). It does work somewhat randomly at times, yes. It's based on various heuristics that sometimes don't work so well.

I'm trying to find out if I can use devtools in the B2G browser and inspect the meta-viewport we're getting in the DOM. If it is just user-scalable=no then this is an evangelism bug because we get a better meta-viewport in Fennec. If the meta-viewport in the DOM is the same as comment 1 then it's a bug in Gecko DOM code somewhere.

In either case having better font inflation would help here (particularly if it's an evangelism bug) but I don't think that's the root cause of any of the problems here.

Comment 5

[Kartikaya Gupta (email:[e-mail])]

So the devtools don't work for the B2G browser but I just used the UA spoofer again in desktop and for some reason now I'm seeing just "user-scalable=no" as the meta-viewport tag. Not sure if it changed between yesterday and today or (more likely) I did it wrong yesterday and/or was seeing a cached version of the page.

Anyhow this looks like an evangelism issue.

Comment 6

[Olli Pettay [:smaug][[e-mail]]]

Note, I've seen this on many forums.
I just picked nyt.fi as an example.

Comment 7

[Karl Dubost💡 :karlcow]

Accessing http://nyt.fi/

So testing the site on Opera Blink for Android, there is no issue.

Testing on Firefox for Android, the top menu displays well, but the photos are overblown. The page is wider than the screen allows to receive. When accessing a specific article, the font is readable without issues, but the article is still too wide.

On Firefox OS, on the other hand, the pictures fit into the width of the phone, because the full is being resized. It makes the top menu displays small, and article titles as well, very small. Same issue when accessing an article.

When faking the UA to be Firefox Android on Firefox Desktop, the site has no specific issues and it is scaled appropriately.


Also "user-scalable=no" exists, but NOT "user-scalable=0".
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">


That said there are a number of bloopers into the CSS.

Inline CSS.
	@font-face {
		font-family: "The Message Bold";
[…]
			url('/webstatic/fonts/the_message-bold-webfont.woff) format('woff'),
[…]	}

Missing quote for the URL part.

in desktop-nyt.css, s/disply/display/

#galleryContainer{
	disply:none
}

usage of deprecated zoom.

webkit only.
@media screen and (-webkit-min-device-pixel-ratio:0){
	.desktop .name-field{
		max-width:477px!important;
		height:16px!important
	}

Comment 8

[Karl Dubost💡 :karlcow]

The meta name and viewport is set through JavaScript.

→ http -b GET http://nyt.fi/ "User-Agent: Mozilla/5.0 (Mobile; rv:30.0) Gecko/30.0 Firefox/30.0" | egrep -i viewport
    <meta name="viewport" content="user-scalable=no" />
→ http -b GET http://nyt.fi/ "User-Agent: Mozilla/5.0 (Android; Mobile; rv:30.0) Gecko/30.0 Firefox/30.0" | egrep -i viewport
    <meta name="viewport" content="user-scalable=no" />


but inspecting the DOM we get 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

In desktop-nyt.js

function setLayout() {
    var width = ($(window) .width() <= screen.width) ? $(window) .width()  : screen.width;
    new_class = width > 1200 ? 'desktop' : (width > 720 && width < 1201) ? 'tablet' : width < 721 ? 'mobile' : '';
    $(document.body) .removeClass('mobile tablet desktop') .addClass(new_class);
    if (width < 721) {
        $('meta[name="viewport"]') .attr('content', 'width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0')
    }


also our Friend mobiledetect
http://detectmobilebrowsers.com/

is using an old version which doesn't catch "Firefox OS" UA.

    mobileDeviceDetectionJS = function() {

            var a = navigator.userAgent||navigator.vendor||window.opera;
            if (/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|meego.+mobile|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))) {
                return true;                
            } else {
                // Windows Phone
                if (/ZuneWP7/.test(a)) {
                    return true;
                }

                // Nokia Asha 311
                if (/Nokia311/.test(a)) {
                    return true;
                }
            
                return false;
            }
        };

Comment 9

[Karl Dubost💡 :karlcow]

OK at least the user scalable *value* is not at cause. All values work.
https://miketaylr.com/posts/2013/10/user-scalable-more-like-loser-scalable-amirite.html

Comment 10

[Hallvord R. M. Steen [:hallvors]]

I guess this may be a dup of bug 976616 ?

Comment 11

[Hallvord R. M. Steen [:hallvors]]

Karl (and/or Olli), do you still see the problem here? The page looks just fine to me.

Comment 12

[Hallvord R. M. Steen [:hallvors]]

Attachment: screenshot.png - just to show what it looks like on my Flame

Comment 13

[Olli Pettay [:smaug][[e-mail]]]

Articles in nyt.fi are not readable on Flame.

And that screenshot shows the issue. Text is super tiny, and one can't zoom it.

Comment 14

[Olli Pettay [:smaug][[e-mail]]]

oh, wait, you get larger text.

Comment 15

[Olli Pettay [:smaug][[e-mail]]]

I certainly see just as small as before text which is very hard to read.

Comment 16

[Hallvord R. M. Steen [:hallvors]]

weird. Is this a plain vanilla setup on your end with no special config?

Comment 17

[Karl Dubost💡 :karlcow]

It is small but I read it. 
The CSS contains things like:


body.mobile {
    background-color: #ccc;
    background-position: top center;
    background-size: 100%;
    color: #221f20;
    font-family: HelsinginTextRegular,Helvetica,Arial,sans-serif;
    font-weight: normal;
    letter-spacing: 0;
    font-size: 13px;
    margin: 0;
    padding: 30px 0 0 0
}

.mobile #content {
    background-color: white;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    -ms-text-size-adjust: none;
    text-size-adjust: none
}

All font-size are specified in pixels.
So it's logical.   

You could try to contact them. Is the same behavior happening on every browsers?

Comment 18

[Olli Pettay [:smaug][[e-mail]]]

The main issue is, though that is a separate already filed bug, that there can be non-zoomable pages.
User should always be able to zoom.

Comment 19

[Karl Dubost💡 :karlcow]

Olli,

Understood and agreed, you are welcome to contact them. 
Nyt seems to be part of the group Sanoma.
https://www.linkedin.com/company/sanoma
They have a twitter account but which doesn't seem to interact with people https://twitter.com/Sanoma

This person could be a useful contact to reach the right person.
https://twitter.com/VesaLindqvist
https://www.linkedin.com/in/govpl

Comment 20

[Hallvord R. M. Steen [:hallvors]]

I'll mark this [contactready] and let somebody reach out to recommend dropping the user-scalable=no directive.

Comment 21

[Karl Dubost💡 :karlcow]

fixed.