nextcloud.com - design is broken

[reinhart1010]

URL: https://nextcloud.com/collaboraonline/

Browser / Version: Firefox Mobile 61.0 Operating System: Android 7.0 Tested Another Browser: Yes

Problem type: Design is broken Description: Nextcloud logo is misaligned Steps to Reproduce:

1. Visit the site.

This issue does not occur in Chrome 66, Android 7.0.

From webcompat.com with ❤️

[softvision-oana-arbuzov]

Thanks for the report @reinhart1010, I was able to reproduce the issue. When scrolling up/down the page the top bar menu floats and the logo name overlaps the text on the page. On Chrome the top bar has a fix position on top and the logo is smaller in size than on Firefox.

Affected area:

<div class="container">
    <div class="nav__bg-wrapper">
        <div class="nav__bg"></div>
    </div>
    <div class="brand">
        <a href="https://nextcloud.com/homepage">
            <div class="logo stopedAnimation"></div>
        </a>
    </div>
    <button type="button" class="navbar-toggle collapsed" id="toggle">
        <div class="menu-animation" data-animation-path="img/menu/black/" data-anim-loop="false" data-name="menu-black" id="menu-black"></div>
        <svg
            xmlns="http://www.w3.org/2000/svg" width="53" height="53" viewBox="0 0 53 53" preserveAspectRatio="xMidYMid meet" style="width: 100%; height: 100%;">
            <defs>
                <clipPath id="animationMask_8bxseFuotj">
                    <rect width="53" height="53" x="0" y="0"></rect>
                </clipPath>
            </defs>
            <g clip-path="url(#animationMask_8bxseFuotj)">
                <g style="-moz-user-select: none;" transform="matrix(1,0,0,1,-0.25,-0.25)" opacity="1">
                    <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                        <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(43,43,53)" stroke-opacity="1" stroke-width="1" d="M0 0 M12.348,31.935 C12.348,31.935 44.359,31.995 44.359,31.995"></path>
                    </g>
                </g>
                <g style="-moz-user-select: none;" transform="matrix(1,0,0,1,-0.25,-0.25)" opacity="1">
                    <g opacity="1" transform="matrix(1,0,0,1,0,0)">
                        <path stroke-linecap="butt" stroke-linejoin="miter" fill-opacity="0" stroke-miterlimit="4" stroke="rgb(43,43,53)" stroke-opacity="1" stroke-width="1" d="M0 0 M12.348,22.717 C12.348,22.717 44.386,22.729 44.386,22.729"></path>
                    </g>
                </g>
            </g>
        </svg>
    </button>
<!--cut out-->
</div>

Tested with: Browser / Version: Firefox Nightly 61.0a1 (2018-05-06) Operating System: Google Pixel (Android 8.1.0) - 1080 x 1920 pixels (~441 ppi pixel density), Samsung Galaxy S6 (Android 7.0) - Resolution 1440 x 2560 pixels (~577 ppi pixel density)

Moving to Needsdiagnosis for further investigation.

[karlcow]

This site is pretty… broken. It's even worse on RDM.

10:07:33.459 Navigated to https://nextcloud.com/
10:07:35.166 JQMIGRATE: Migrate is installed, version 1.4.1 jquery-migrate.min.js:2:542
10:07:35.825 [Show/hide message details.] Error: Mismatched anonymous define() module: function ($, _, enquire, TweenMax) {
        $(document).ready(function() {
            'use strict';
            var main = {
                init: function() {
                    this.variables.buttonDropdownSelector.on('click', _.bind(this.buttonDropdown, this));
                    $(window).on('scroll.fadeOnce', _.bind(this.revealOnScroll, this));
                    this.animationOnLoadPage();
                    this.removeRevealOnScroll();
                    this.consoleMessage();
                },

                variables: {
                    topHeaderSelector: '.topheader',
                    heroHeading: '.topheader h1',
                    heroSubtitle: '.topheader h2',
                    heroSectionBackgroundSelector: '.background',
                    buttonDropdownSelector: $('.button--dropdown'),
                    buttonDropdownContentSelector: $('.dropdown-content'),
                    SlideshowTextTriggerSelector: $('.textTrigger'),
                    spriteSlideshowSelector: $('.image-top-container'),
                    slideshowContentSelector: '.slideshow',
                    slideshowIndicatorsSelector: '.indicators',
                    slideshowImageOnTopSelector: '.image-top',
                    textTriggerSelector: '.textTrigger',
                    indicatorSlideshow: 'btn_carousel',
                    visibleClass : 'visible',
                    activeClass: 'active'
                },

                consoleMessage: function() {
                    console.log('%c\nNextcloud, A safe home for all your data', 'font-size:20px');
                    console.log(
                        '%c',
                        'font-size: 100px; background: white url(' + window.location + 'wp-content/themes/next/assets/img/logo/logo_nextcloud_blue.png) no-repeat left bottom; background-repeat: no-repeat; background-size: 100px 64px;'
                    );
                },

                checkScrollPosition: function() {
                    var currentScrollPosition = $(document).scrollTop().valueOf();

                    if (currentScrollPosition > 500) {
                        $('.revealOnScroll:not(.fade-in)').each(_.bind(this.removeRevealOnScroll, this));
                    } else {
                        return;
                    }
                },

                removeRevealOnScroll: function(index, element) {
                    $(element).addClass('fade-in');
                },

                buttonDropdown: function() {
                    this.variables.buttonDropdownSelector.toggleClass(this.variables.activeClass);
                    this.variables.buttonDropdownContentSelector.toggleClass(this.variables.visibleClass);
                },

                animationOnLoadPage: function() {
                    var animationOnLoadPageTimeline = new TimelineMax ();

                    animationOnLoadPageTimeline.to($(this.variables.topHeaderSelector), 1, {autoAlpha: 1});
                    animationOnLoadPageTimeline.to($(this.variables.heroSectionBackgroundSelector), 1, {autoAlpha: 1});
                    animationOnLoadPageTimeline.to($(this.variables.heroHeading), 1, {y:0 , autoAlpha: 1});
                    animationOnLoadPageTimeline.to($(this.variables.heroSubtitle), 1, {y:0 , autoAlpha: 1}, '-= 0.6');
                },

                smoothScroll: function() {
                    $('a[href*="#"]:not([href="#"]):not([data-toggle="collapse"])').click(function() {

                        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
                            var target = $(this.hash);
                            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');

                            if (target.length) {
                                $('html, body').animate({
                                    scrollTop: target.offset().top
                                }, 1000);

                                return false;
                            }
                        }
                    });
                },

                revealOnScroll: function(event) {
                    var scrollTop = $(window).scrollTop();
                    $('.revealOnScroll:not(.fade-in)').each(function(index, element) {
                        var selectorOffset = $(element).offset();
                        if (scrollTop + window.innerHeight - 100 > selectorOffset.top) {
                            $(element).addClass('fade-in').velocity('transition.slideUpIn');
                        }
                    });
                },
            };
            main.init();
        });
    }
http://requirejs.org/docs/errors.html#mismatch require.min.js:17:53
makeError
https://nextcloud.com/wp-content/themes/next/node_modules/requirejs/require.min.js:17:53
intakeDefines
https://nextcloud.com/wp-content/themes/next/node_modules/requirejs/require.min.js:81:132
localRequire/<
https://nextcloud.com/wp-content/themes/next/node_modules/requirejs/require.min.js:100:45

[karlcow]

Nothing strange for the viewport.

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

hmmm there is a syntax error in the document which might partially create the issue but where…

SyntaxError: expected expression, got '<'

[karlcow]

The logo size depends on… zoom.

.nav .container .brand .logo:not(.scrolled):not(.menu-open) {
    background: url(/wp-content/themes/next/assets/img/logo/logo_white_sprite.png?x16328) 0 0 no-repeat;
    height: 100px;
    width: 140px;
    display: inline-block;
    zoom: 0.5;
}

if I do instead:

.nav .container .brand .logo:not(.scrolled):not(.menu-open) {
    background: url(/wp-content/themes/next/assets/img/logo/logo_white_sprite.png?x16328) 0 0 no-repeat;
    height: 100px;
    width: 140px;
    display: inline-block;
    zoom: 0.5;
    transform-origin: 0 0;
    transform: scale(0.5);
}

The logo size is fixed.

And the same thing needs to be done on

.nav.scrolled .logo:not(.menu-open) {
    background: url(/wp-content/themes/next/assets/img/logo/logo_blue_sprite.png?x16328) 0 0 no-repeat;
    height: 100px;
    width: 140px;
    display: inline-block;
    zoom: 0.5;
}

and

    .nav .container .brand .logo.menu-open {
        background: url(/wp-content/themes/next/assets/img/logo/logo_white_sprite.png?x16328) 0 0 no-repeat;
        height: 100px;
        width: 140px;
        display: inline-block;
        zoom: 0.5
    }

zoom is not supported in Firefox. There's a parity issue about this non-standard property. https://bugzilla.mozilla.org/show_bug.cgi?id=390936

[karlcow]

The site is quite broken in desktop too. They can be contacted at https://nextcloud.com/contact/

They are also on freenode irc://#nextcloud-dev@freenode.net

On Github @nextcloud with quite a good list of people https://github.com/orgs/nextcloud/people

[reinhart1010]

Added browser-firefox as this is happenning in #16914

[adamopenweb]

Contacted via site form, but let's also see if @AndyScherzinger or @ChristophWurst can help us find the right person for this issue.

[AndyScherzinger]

Christoph is probably a good choice and also @jancborchardt, one of the designers.

[jancborchardt]

cc'ing website folks @jospoortvliet & @Espina2

[jospoortvliet]

Thanks guys, I'll have a look! I can at least take the fixes you proposed - I'm not very technical and didn't write the JS of that menu, that's @Espina2.

PS our website is in https://github.com/nextcloud/nextcloud.com - all open, isn't that easy ;-)

[jospoortvliet]

Ok, I tried to reproduce on Firefox 60.0 and I can't reproduce the issue - things work just fine.

However, if I add

            transform-origin: 0 0;
            transform: scale(0.5);

to the places where we have zoom: 0.5; nothing changes on Chrome but in Firefox, the icon becomes quarter size. Moreover, disabling zoom keeps the icon as quarter size on Firefox but keeps the proper size (half size) on Chrome.

This fix doesn't seem to make anything better... Why can't I reproduce it?

[adamopenweb]

Thanks for your help @jospoortvliet!

@karlcow I wonder if we have a regression here? I'm not able to reproduce the issue in Firefox 60 but I can in 61.0b7(beta) and 62 (nightly).

Firefox 61.0b7:

Firefox 60:

[adamopenweb]

I ran mozregression and it doesn't appear to be a regression, as the large logo was appearing back to Firefox 59 Nightly for Android.

@reinhart1010 mentioned that this is happening on desktop as well.

You can also see on desktop the difference between Firefox release 60 and Nightly 62.

Nightly top, release bottom.

[miketaylr]

mozregression points me at https://hg.mozilla.org/integration/autoland/pushloghtml?fromchange=4ad2150e73c0b19f1f6264a4b9ad6927986d43ce&tochange=37e0bd919af057d44c5c1410458c0f00a3653c11, which contains the issue where @-moz-document was disabled for non-release.

[miketaylr]

So presumably there's some stylesheet serving a Firefox specific style, and that's no longer working (except for release right now).

[miketaylr]

@-moz-document url-prefix(){
    .brand{
        -webkit-transform:scale(0.5);
        top:-26px !important
    }
}

[cipriansv]

After retesting the issue I confirm that the issue has been fixed.

Tested with: Browser / Version: Firefox Nightly 68.0a1 (2019-08-05), Firefox Preview 1.1.0 (Build #12042112) Operating System: Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)