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

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

Closed
webcompat-bot opened this Issue Jan 15, 2016 · 9 comments

Comments

Projects
None yet
3 participants
@webcompat-bot
Copy link

webcompat-bot commented Jan 15, 2016

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

Expected Behavior: page displays properly

Actual Behavior: menu blocks most of page

@miketaylr

This comment has been minimized.

Copy link
Member

miketaylr commented Jan 15, 2016

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

@miketaylr

This comment has been minimized.

Copy link
Member

miketaylr commented Jan 15, 2016

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

@miketaylr

This comment has been minimized.

Copy link
Member

miketaylr commented Jan 15, 2016

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

This comment has been minimized.

Copy link
Member

miketaylr commented Jan 15, 2016

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

This comment has been minimized.

Copy link
Member

miketaylr commented Jan 15, 2016

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

This comment has been minimized.

Copy link
Member

miketaylr commented Jan 15, 2016

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

This comment has been minimized.

Copy link
Member

miketaylr commented Jan 15, 2016

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 miketaylr changed the title spanishfood.about.com - mobile site is not usable spanishfood.about.com - mobile site is not usable, due to Modernizr.csstransform3d false positive Jan 15, 2016

@miketaylr

This comment has been minimized.

Copy link
Member

miketaylr commented Jan 21, 2016

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

@karlcow

This comment has been minimized.

Copy link
Contributor

karlcow commented Jan 26, 2016

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

@karlcow karlcow closed this Jan 26, 2016

@karlcow karlcow added this to the fixed milestone Oct 30, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment