spanishfood.about.com - mobile site is not usable, due to Modernizr.csstransform3d false positive

[webcompat-bot]

URL: http://spanishfood.about.com/od/maincourses/r/arrozalhorno.htm
Browser / Version: Firefox Mobile 46.0
Operating System: Android 5.1.1
Problem type: Mobile site is not usable

Steps to Reproduce

1. Navigate to: http://spanishfood.about.com/od/maincourses/r/arrozalhorno.htm
2. …

Expected Behavior: page displays properly

Actual Behavior: menu blocks most of page

[miketaylr]

Note, this doesn't reproduce with layout.css.prefixes.webkit to false.

[miketaylr]

I see the following Modernizr class: no-csstransforms3d, which reminds me of https://bugzilla.mozilla.org/show_bug.cgi?id=1239136#c8.

[miketaylr]

Possibly related, note if (Modernizr.csstransforms3d) {

$(function() {
    function a() {
        var a = $(".fixed-social");
        e.toggleClass(j),
        d.toggleClass(i),
        f.toggleClass(k),
        g.toggleClass(l),
        a.length && (e.hasClass(j) ? a.addClass(k) : a.removeClass(k))
    }
    function b() {
        var a = $(".fixed-social");
        e.addClass(j),
        d.animate({
            left: "0px"
        }, n),
        f.animate({
            left: o
        }, n),
        a.length && a.animate({
            left: o
        }, n),
        g.animate({
            left: o
        }, n)
    }
    function c() {
        var a = $(".fixed-social");
        e.removeClass(j),
        d.animate({
            left: "-" + o
        }, n),
        f.animate({
            left: "0px"
        }, n),
        a.length && a.animate({
            left: "0px"
        }, n),
        g.animate({
            left: "0px"
        }, n)
    }
    var d = $(".pushy")
      , e = $("body")
      , f = $("#container")
      , g = $(".push")
      , h = $(".site-overlay")
      , i = "pushy-left pushy-open"
      , j = "pushy-active"
      , k = "container-push"
      , l = "push-push"
      , m = $(".menu-btn")
      , n = 200
      , o = d.width() + "px";
    if (Modernizr.csstransforms3d)
        m.click(function(b) {
            b.preventDefault(),
            a()
        }),
        h.click(function(b) {
            b.preventDefault(),
            a()
        });
    else {
        d.css({
            left: "-" + o
        }),
        f.css({
            "overflow-x": "hidden"
        });
        var p = !0;
        m.click(function(a) {
            a.preventDefault(),
            p ? (b(),
            p = !1) : (c(),
            p = !0)
        }),
        h.click(function(a) {
            a.preventDefault(),
            p ? (b(),
            p = !1) : (c(),
            p = !0)
        })
    }
});

[miketaylr]

I'm like 90% certain the reason this page is busted is due to the faulty Modernizr test. Here's the code that should be working, which is responsible for translating the page/menu:

/*! Pushy - v0.9.1 - 2013-9-16
* Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions.
* https://github.com/christophery/pushy/
* by Christopher Yee */
.pushy {
    position: fixed;
    width: 275px;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 30;
    -webkit-box-shadow: inset -10px 0 6px -9px rgba(0,0,0,.7);
    -moz-box-shadow: inset -10px 0 6px -9px rgba(0,0,0,.7);
    box-shadow: inset -10px 0 6px -9px rgba(0,0,0,.7);
    overflow: scroll;
    -webkit-overflow-scrolling: touch
}

.pushy-left {
    -webkit-transform: translate3d(-275px,0,0);
    -moz-transform: translate3d(-275px,0,0);
    -ms-transform: translate3d(-275px,0,0);
    -o-transform: translate3d(-275px,0,0);
    transform: translate3d(-275px,0,0)
}

.pushy-right {
    -webkit-transform: translate3d(275px,0,0);
    -moz-transform: translate3d(275px,0,0);
    -ms-transform: translate3d(275px,0,0);
    -o-transform: translate3d(275px,0,0);
    transform: translate3d(275px,0,0)
}

.pushy-open {
    -webkit-transform: translate3d(0,0,0);
    -moz-transform: translate3d(0,0,0);
    -ms-transform: translate3d(0,0,0);
    -o-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0)
}

.container-push,.push-push,.pushy-active .category-navbar,.pushy-active .mast-mobile .half,.pushy-active .mobile-search {
    -webkit-transform: translate3d(-275px,0,0);
    -moz-transform: translate3d(-275px,0,0);
    -ms-transform: translate3d(-275px,0,0);
    -o-transform: translate3d(-275px,0,0);
    transform: translate3d(-275px,0,0)
}

#container,.category-navbar,.fixed-social,.mast-mobile .half,.mobile-search,.push,.pushy {
    -webkit-transition: -webkit-transform .2s cubic-bezier(0.16,.68,.43,.99);
    -moz-transition: -moz-transform .2s cubic-bezier(0.16,.68,.43,.99);
    -o-transition: -o-transform .2s cubic-bezier(0.16,.68,.43,.99);
    transition: transform .2s cubic-bezier(0.16,.68,.43,.99);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000
}

[miketaylr]

Current version of the Pushy lib don't have the Modernizr dependency, so that's good: christophery/pushy#39 (and the demo works fine in Nightly).

[miketaylr]

So they're using Modernizr 2.8.3 @ http://fj.about.com/js/1.63.2/cache/eNp1kM8OwjAIxl9I14cwxusOi_f-YRXXQtNSt_n09mDiYrYLyccP-ADLMTEBSVEORl2DKMMz5BY5Qtbkz25MA0YkrxwWUU12PkkX2HvIndX2Ae70_PUHNOoF5DgryzwhlH9aBQPKDtCGq_Taw5Ukr8Oa4LDijjBv4YHVd5HIDjLhO19qEY67U2_9sM0TzCWASPtFu9BOhhcoH7Arc8M.min.js

y.csstransforms3d = function() {
        var a = !!i("perspective");
        return a && "webkitPerspective" in p.style && B("@media (transform-3d),(-webkit-transform-3d){#modernizr{left:9px;position:absolute;height:3px;}}", function(b, c) {
            a = 9 === b.offsetLeft && 3 === b.offsetHeight
        }),
        a
    }

So why is that test failing....

(Note it's a notoriously bad test Modernizr/Modernizr#590)

[miketaylr]

So why is that test failing....

Oh, right. In the B("@media (transform-3d),(-webkit-transform-3d) test, (transform-3d) isn't a real media feature. Fixing https://bugzilla.mozilla.org/show_bug.cgi?id=1239799 should make this test pass, and the site should be un-broken.

[miketaylr]

@hallvors can you verify that this is fixed in today's nightly?

[karlcow]

Working on Android in the latest nightly (47.0a1 2016-01-25)