beeg.com - site is not usable

[webcompat-bot]

URL: https://beeg.com/5209164

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

Problem type: Site is not usable Description: The site not appear Steps to Reproduce:

From webcompat.com with ❤️

[softvision-sergiulogigan]

I can also reproduce this issue on Samsung Galaxy S6, Android 7.0 and Nightly 61. Works on Chrome mobile/Desktop and also on Nightly 61 Desktop.

Console:

vp enable: true 1524504794.js:2:279528
show video checkpoint #1 1524504794.js:2:264779
show video checkpoint #2 1524504794.js:2:264939
show video checkpoint #3 1524504794.js:2:265079
scroll to player 5209164:2:3
scroll to: 2 0 1524504794.js:2:266980
show video checkpoint #4 1524504794.js:2:265221
show video checkpoint #9 1524504794.js:2:265296
show video checkpoint #5 1524504794.js:2:264105
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user’s experience. For more help http://xhr.spec.whatwg.org/ 1524504794.js:1:79936
show video checkpoint #6 1524504794.js:2:264176
show video checkpoint #7 1524504794.js:2:264332
scroll to player 5209164:2:3
scroll to: 2 0 1524504794.js:2:266980
show ad 5209164:7:5
show ad (anti-ab) 5209164:10:5
exo 1524504794.js:2:150214
show video checkpoint #8 1524504794.js:2:264414
A call to document.write() from an asynchronously-loaded external script was ignored. ads.js:10
Object { originalEvent: message, type: "message", isDefaultPrevented: wa(), target: Window, currentTarget: Window, relatedTarget: undefined, timeStamp: 8842, jQuery32106162408617881239: true, delegateTarget: Window, handleObj: {…}, … }
1524504794.js:2:281325 

[karlcow]

Right now I get a blank page both on Firefox and Chrome on RDM with Firefox UA. and a blank page on Firefox Android and working on Chrome Android.

On Firefox Android a version of the page is displayed briefly, like if it was blown up, and then suddenly disappears.

A call to document.write() from an asynchronously-loaded external script was ignored.

This could be a reason. The content is there:

<div id="tpl-index" style="display: none;">
…
</div>

it is just hidden. Removing the display: none shows the content. There must be a JS instruction in charge of showing/hiding this content. In https://beeg.com/static/cpl/1525723877.js

templates["mobile_index.html"] = function(obj) {
    var p = [];
    with (obj) {
        p.push(""),
        addMeta("viewport", "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"),
        p.push("\r\n"),
        addMeta("apple-touch-fullscreen", "yes"),
        p.push("\r\n"),
        addMeta("apple-mobile-web-app-status-bar-style", "default"),
        p.push("\r\n"),
        addMeta("format-detection", "telephone=no"),
        p.push("\r\n"),
        setClass("html", platform),
        p.push("\r\n"),
        addClass("html", "index-page"),
        p.push("\r\n"),
        !open_video && useragent.indexOf("Firefox") >= 0 && $("#tpl-index").show(0),
        p.push('\r\n\r\n<div class="container" id="container">\r\n\r\n    <!-- LOGO -->\r\n    <div class="logo-mini">\r\n        <span class="slogan">The simplest.</span>\r\n        <a href="/" title="beeg." alt="beeg." class="sp-link"><span>beeg.</span></a>\r\n        <span title="Everything!" class="btn btn-white btn-everything"><span></span></span>\r\n    </div>\r\n    <!-- /LOGO -->\r\n\r\n    <!-- DASHBOARD -->\r\n    <div class="dashboard" style="display:none;">\r\n        <span class="message">More features later in Feb.</span>\r\n        <ul class="cats clearfix">\r\n            <li>\r\n                <form name="search_form" action="/" method="get">\r\n                    <input type="text" name="q" placeholder="..." class="search-input" value="', json.query, '">\r\n                    <input type="submit">\r\n                </form>\r\n                <a href="/" class="search-btn"></a>\r\n            </li>\r\n            ');
        for (var i = 0; i < json.tags.popular.length; i++)
            p.push('\r\n            <li><a class="sp-link" href="/tag/', json.tags.popular[i].tagify(), '" title="', json.tags.popular[i].titlecase(), '" alt="', json.tags.popular[i].titlecase(), '">', json.tags.popular[i].titlecase(), "</a></li>\r\n            ");
        p.push('\r\n        </ul>\r\n    </div>\r\n    <!-- /DASHBOARD -->\r\n\r\n    <!-- THUMBS -->\r\n    <div class="thumbs clearfix" id="thumbs">\r\n        ');
        for (var i = 0; i < json.videos.length; i++)
            json.videos[i] && json.videos[i].id && p.push('\r\n            <div class="thumb-unit">\r\n                <a href="/', json.videos[i].id + (beeg.is_mini ? "#native-player" : ""), '" class="sp-link" data-thumb-id="', i, '" data-video-id="', json.videos[i].id, '">\r\n                    <img src="//img.beeg.com/', beeg.thumb_size_16x9, "/", json.videos[i].id, '.jpg" alt="', json.videos[i].title, '" title="', json.videos[i].title, '" />\r\n                </a>\r\n            </div>\r\n        ');
        p.push('\r\n        <div class="thumb-unit"></div>\r\n    </div>\r\n    <!-- /THUMBS -->\r\n\r\n    <!-- VIDEO PREVIEW -->\r\n    <div id="video-preview-wrapper">\r\n        <canvas id="video-preview"></canvas>\r\n    </div>\r\n    <!-- /VIDEO PREVIEW -->\r\n\r\n    <!-- PAGER -->\r\n    '),
        pagination && p.push('\r\n    <div class="pager">\r\n        <a href="', pagination.prev.url, '" id="paging_prev" class="sp-link pagination ', pagination.curr > 1 ? "" : "invisible", '"></a>\r\n        <span>', pagination.curr, " of ", json.pages, '</span>\r\n        <a href="', pagination.next.url, '" id="paging_next" class="sp-link pagination"></a>\r\n    </div>\r\n    '),
        p.push("\r\n    <!-- /PAGER -->\r\n\r\n    <!-- FOOTER -->\r\n    <div class=\"footer\">\r\n        <ul class=\"clearfix\">\r\n            <li class=\"copyright\"></li>\r\n        </ul>\r\n        <ul class=\"clearfix\">\r\n            <li class=\"contact\"><a href=\"/contacts\" class=\"sp-link\"><span>contact</span></a></li>\r\n            <li class=\"pipe\">|</li>\r\n            <li class=\"dmca\"><a href=\"/dmca.html\" class=\"sp-link\"><span>dmca</span></a></li>\r\n            <li class=\"pipe\">|</li>\r\n            <li class=\"upload\"><a href=\"/upload.html\" class=\"sp-link\"><span>upload</span></a></li>\r\n        </ul>\r\n    </div>\r\n    <!-- /FOOTER -->\r\n</div>\r\n\r\n<script>\r\n    beeg.thumbsResize = function () {\r\n//        beeg.thumb_size_16x9 = beeg.getThumbSize16x9();\r\n//        $('.thumb-unit img').each(function (i, el) {\r\n//            el.src = el.src.replace(/\\/\\d+x\\d+\\//, '/' + beeg.thumb_size_16x9 + '/')\r\n//        });\r\n//        beeg.scrollToPlayer(beeg.locatePlayer());\r\n    };\r\n\r\n\r\n    beeg.thumbsInLine = function () {\r\n        return Math.floor($('#thumbs').width() / ($('.thumb-unit').not('.hidden').width() - 1));\r\n    };\r\n\r\n\r\n    beeg.thumbsOfLine = function (line) {\r\n        var n = beeg.thumbsInLine();\r\n        return $('.thumb-unit').slice(line * n, line * n + n);\r\n    };\r\n\r\n\r\n    beeg.lineOfThumb = function (thumb_id) {\r\n        var n = beeg.thumbsInLine();\r\n        return Math.floor(thumb_id / n);\r\n    };\r\n\r\n\r\n    beeg.locatePlayer = function () {\r\n        if (!beeg.video)\r\n            return $(\"body\").scrollTop();\r\n        var move = beeg.click_on_video;\r\n        if (beeg.useragent.indexOf('Firefox') >= 0) {\r\n            $('#tpl-index').hide(0);\r\n            move = false;\r\n        }\r\n        if (beeg.is_ucmini) {\r\n            $('#tpl-index').hide(0);\r\n            $('.container.mobile').width('100%');\r\n            $('.player-box').css({'background-position-x': 'center', 'background-size': '100%'}).width('100%').height($('.player-box').width() * 270 / 480);\r\n            $('.btn-play').removeClass('btn-play').html('<img style=\"margin-top: 50px;\" src=\"/static/img/elements/mobile-play.png\">');\r\n            $('.btn-hq').removeClass('btn-hq').html('<img src=\"/static/img/elements/mobile-hq.png\">');\r\n            move = false;\r\n        }\r\n\r\n        var first_thumb = $('.thumb-unit').eq(0);\r\n        var thumb = $('[data-video-id=' + beeg.video.id + ']').parent();\r\n        var nthumb = thumb.length ? thumb.next() : first_thumb;\r\n        $('.thumb-unit.hidden').removeClass('hidden');\r\n        thumb.addClass('hidden');\r\n\r\n        if (move) {\r\n            if (thumb.length)\r\n                $('#tpl-video').insertAfter(thumb);\r\n            else\r\n                $('#tpl-video').insertBefore(nthumb);\r\n        } else {\r\n            $('#tpl-video').insertBefore(first_thumb);\r\n        }\r\n        return $('#tpl-video').offset().top;\r\n\r\n/*\r\n        var nthumb_id = parseInt(nthumb.children().attr('data-thumb-id'));\r\n        var line = beeg.lineOfThumb(nthumb_id);\r\n        var thumbs = beeg.thumbsOfLine(line);\r\n        var prev_thumbs = $('.thumb-unit.pline');\r\n        var prev_line = prev_thumbs.length ? beeg.lineOfThumb(parseInt(prev_thumbs.children().attr('data-thumb-id'))) : null;\r\n        var player_height = $('#tpl-video').height();\r\n\r\n        prev_thumbs.css('margin-top', 0).removeClass('pline');\r\n\r\n        var left = $('#thumbs').offset();\r\n        left = (left === undefined) ? 0 : left.left;\r\n        var top = nthumb.offset();\r\n        top = (top === undefined) ? 0 : (top.top + 0);\r\n        $('#tpl-video').css({\r\n            top: top\r\n        });\r\n\r\n        thumbs.css('margin-top', player_height).addClass('pline');\r\n\r\n        $('#player_wrapper, #html5player').css({\r\n            top: $('.player-box').offset().top + 'px',\r\n            left: $('.player-box').offset().left + 'px',\r\n            width: $('.player-box').width() + 'px',\r\n            height: $('.player-box').height() + 'px'\r\n        });\r\n\r\n        return top;\r\n*/\r\n    };\r\n\r\n    beeg.removePlayer = function (full) {\r\n        if (beeg.player) beeg.player.hide();\r\n        if (window.jwplayer && jwplayer()) jwplayer().remove();\r\n        if (full) {\r\n            $('.thumb-unit.pline').css('margin-top', 0).removeClass('pline');\r\n            $('#tpl-video').html('');\r\n        }\r\n    };\r\n\r\n    beeg.initPlayer = function (callback) {};\r\n\r\n    beeg.showRotator = function () {};\r\n\r\n    beeg.showHTML5Player = function (show) {};\r\n\r\n    if (beeg.md.os().toLowerCase() == 'ios' && !beeg.ios_fix) {\r\n        setTimeout(function () {\r\n            $(document).scrollTop(0);\r\n            $('body, html').scrollTop(0);\r\n            $(window).scrollTop(0);\r\n            beeg.ios_fix = true;\r\n        }, 100);\r\n    }\r\n\r\n</script>")
    }
    return p.join("")
}

so the line

        !open_video && useragent.indexOf("Firefox") >= 0 && $("#tpl-index").show(0),

and

if (beeg.useragent.indexOf('Firefox') >= 0) {            $('#tpl-index').hide(0); …

https://ads.exosrv.com/ads.js

if (top === self)
    var p = document.URL;
else
    var p = document.referrer;
var dt = new Date().getTime();
var exoDocumentProtocol = (document.location.protocol != "https:" && document.location.protocol != "http:") ? "https:" : document.location.protocol;
if (typeof ad_sub == 'undefined')
    var ad_sub = "";
if (typeof ad_tags == 'undefined')
    var ad_tags = "";
if (typeof ad_email == 'undefined')
    var ad_email = "";
if (typeof ad_notify == 'undefined')
    var ad_notify = "";
var ad_type = ad_width + 'x' + ad_height;
if (ad_width == '100%' && ad_height == '100%')
    ad_type = 'auto';
var ad_screen_resolution = screen.width + 'x' + screen.height;
document.write('<iframe frameborder="0" scrolling="no" width="' + ad_width + '" height="' + ad_height + '" src="' + exoDocumentProtocol + '//syndication.exosrv.com/ads-iframe-display.php?idzone=' + ad_idzone + '&type=' + ad_type + (ad_notify !== "" ? "&notify=" + ad_notify : "") + '&p=' + escape(p) + '&dt=' + dt + '&sub=' + ad_sub + '&tags=' + ad_tags + '&screen_resolution=' + ad_screen_resolution + '&email=' + ad_email + '"></iframe>');

It goes through it without issue.

hmmm I haven't found yet. I'm close but not there.

[KoopsF]

Is there a solution? Can I do something with those codes?

[karlcow]

This is definitely based on the user agent string. Because when I set a chrome UA. The design is loaded.

and I suspect this line.

p.push('\r\n    <!-- /PAGER -->\r\n\r\n    <!-- \r\n    <div class="footer">\r\n        <ul class="clearfix">\r\n            <li class="copyright"></li>\r\n        </ul>\r\n        <ul class="clearfix">\r\n            <li class="contact"><a href="/contacts" class="sp-link"><span>contact</span></a></li>\r\n            <li class="pipe">|</li>\r\n            <li class="dmca"><a href="/dmca.html" class="sp-link"><span>dmca</span></a></li>\r\n            <li class="pipe">|</li>\r\n            <li class="upload"><a href="/upload.html" class="sp-link"><span>upload</span></a></li>\r\n        </ul>\r\n    </div>\r\n    -->\r\n    \r\n    \r\n    <!-- FOOTER -->\r\n    <section class="i-footer">\r\n        <div class="inner">\r\n            <span class="copyright"></span>\r\n            <a href="/contacts" class="sp-link contact">contact</a>\r\n            <a href="/dmca.html" class="sp-link dmca">dmca</a>\r\n            <a href="/upload.html" class="sp-link upload">upload</a>\r\n            <a href="https://webmasters.beeg.com/" class="webmasters">webmasters</a>\r\n        </div>\r\n    </section>\r\n    <!-- /FOOTER -->\r\n\r\n\r\n</div>\r\n\r\n<script>\r\n    beeg.thumbsResize = function () {\r\n//        beeg.thumb_size_16x9 = beeg.getThumbSize16x9();\r\n//        $(\'.thumb-unit img\').each(function (i, el) {\r\n//            el.src = el.src.replace(/\\/\\d+x\\d+\\//, \'/\' + beeg.thumb_size_16x9 + \'/\')\r\n//        });\r\n//        beeg.scrollToPlayer(beeg.locatePlayer());\r\n    };\r\n\r\n\r\n    beeg.thumbsInLine = function () {\r\n        return Math.floor($(\'#thumbs\').width() / ($(\'.thumb-unit\').not(\'.hidden\').width() - 1));\r\n    };\r\n\r\n\r\n    beeg.thumbsOfLine = function (line) {\r\n        var n = beeg.thumbsInLine();\r\n        return $(\'.thumb-unit\').slice(line * n, line * n + n);\r\n    };\r\n\r\n\r\n    beeg.lineOfThumb = function (thumb_id) {\r\n        var n = beeg.thumbsInLine();\r\n        return Math.floor(thumb_id / n);\r\n    };\r\n\r\n\r\n    beeg.locatePlayer = function () {\r\n        if (beeg.pagetype != \'video\')\r\n            return $("body").scrollTop();\r\n        var move = beeg.click_on_video;\r\n        if (beeg.useragent.indexOf(\'Firefox\') >= 0) {\r\n            $(\'#tpl-index\').hide(0);\r\n            move = false;\r\n        }\r\n        if (beeg.is_ucmini) {\r\n            $(\'#tpl-index\').hide(0);\r\n            $(\'.container.mobile\').width(\'100%\');\r\n            $(\'.player-box\').css({\'background-position-x\': \'center\', \'background-size\': \'100%\'}).width(\'100%\').height($(\'.player-box\').width() * 270 / 480);\r\n            $(\'.btn-play\').removeClass(\'btn-play\').html(\'<img style="margin-top: 50px;" src="/static/img/elements/mobile-play.png">\');\r\n            $(\'.btn-hq\').removeClass(\'btn-hq\').html(\'<img src="/static/img/elements/mobile-hq.png">\');\r\n            move = false;\r\n        }\r\n\r\n        var first_thumb = $(\'.thumb-unit\').eq(0);\r\n        var thumb = $(\'[data-video-id=\' + beeg.video.id + \']\').parent();\r\n        var nthumb = thumb.length ? thumb.next() : first_thumb;\r\n        $(\'.thumb-unit.hidden\').removeClass(\'hidden\');\r\n        thumb.addClass(\'hidden\');\r\n\r\n        if (move) {\r\n            if (thumb.length)\r\n                $(\'#tpl-video\').insertAfter(thumb);\r\n            else\r\n                $(\'#tpl-video\').insertBefore(nthumb);\r\n        } else {\r\n            $(\'#tpl-video\').insertBefore(first_thumb);\r\n        }\r\n        return $(\'#tpl-video\').offset().top;\r\n\r\n/*\r\n        var nthumb_id = parseInt(nthumb.children().attr(\'data-thumb-id\'));\r\n        var line = beeg.lineOfThumb(nthumb_id);\r\n        var thumbs = beeg.thumbsOfLine(line);\r\n        var prev_thumbs = $(\'.thumb-unit.pline\');\r\n        var prev_line = prev_thumbs.length ? beeg.lineOfThumb(parseInt(prev_thumbs.children().attr(\'data-thumb-id\'))) : null;\r\n        var player_height = $(\'#tpl-video\').height();\r\n\r\n        prev_thumbs.css(\'margin-top\', 0).removeClass(\'pline\');\r\n\r\n        var left = $(\'#thumbs\').offset();\r\n        left = (left === undefined) ? 0 : left.left;\r\n        var top = nthumb.offset();\r\n        top = (top === undefined) ? 0 : (top.top + 0);\r\n        $(\'#tpl-video\').css({\r\n            top: top\r\n        });\r\n\r\n        thumbs.css(\'margin-top\', player_height).addClass(\'pline\');\r\n\r\n        $(\'#player_wrapper, #html5player\').css({\r\n            top: $(\'.player-box\').offset().top + \'px\',\r\n            left: $(\'.player-box\').offset().left + \'px\',\r\n            width: $(\'.player-box\').width() + \'px\',\r\n            height: $(\'.player-box\').height() + \'px\'\r\n        });\r\n\r\n        return top;\r\n*/\r\n    };\r\n\r\n    beeg.removePlayer = function (full) {\r\n        if (beeg.player) beeg.player.hide();\r\n        if (full) {\r\n            $(\'.thumb-unit.pline\').css(\'margin-top\', 0).removeClass(\'pline\');\r\n            $(\'#tpl-video\').html(\'\');\r\n        }\r\n    };\r\n\r\n    beeg.initPlayer = function (callback) {};\r\n\r\n    beeg.showRotator = function () {};\r\n\r\n    beeg.showHTML5Player = function (show) {};\r\n\r\n    if (beeg.md.os().toLowerCase() == \'ios\' && !beeg.ios_fix) {\r\n        setTimeout(function () {\r\n            $(document).scrollTop(0);\r\n            $(\'body, html\').scrollTop(0);\r\n            $(window).scrollTop(0);\r\n            beeg.ios_fix = true;\r\n        }, 100);\r\n    }\r\n\r\n</script>')

which contains

    beeg.locatePlayer = function () {
        if (beeg.pagetype != 'video')
            return $("body").scrollTop();
        var move = beeg.click_on_video;
        if (beeg.useragent.indexOf('Firefox') >= 0) {
            $('#tpl-index').hide(0);
            move = false;
        }

…

[adamopenweb]

Contacting via website contact form: https://beeg.com/contacts

[softvision-sergiulogigan]

The issue is still reproducible on my side.

Tested with: Browser / Version: Firefox Nightly 68.0a1 (2019-06-10) Operating System: OnePlus 6 (Android 9) - 1080 x 2280 pixels, 19:9 ratio (~402 ppi pixel density)

[ksy36]

Created https://bugzilla.mozilla.org/show_bug.cgi?id=1567945

[miketaylr]

This is fixed now in the 5.0.2 system addon update. Should be in Fennec Nightly tomorrow, and beta soon.