ek.ua - Filter setting menu not displayed

[webcompat-bot]

URL: http://ek.ua/k298.htm#

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

Problem type: Design is broken Description: filters does not work (side menu) Steps to Reproduce: After pressing a button should be opened filters menu. Instead opened black screen

Browser Configuration

• mixed active content blocked: false
• image.mem.shared: true
• buildID: 20181217180946
• tracking content blocked: false
• gfx.webrender.blob-images: true
• hasTouchScreen: true
• mixed passive content blocked: false
• gfx.webrender.enabled: false
• gfx.webrender.all: false
• channel: beta

Console Messages:

[u'[JavaScript Warning: "Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (262548 px). Occurrences of will-change over the budget will be ignored." {file: "http://ek.ua/k298.htm" line: 0}]', u'[JavaScript Error: "TypeError: window._rightPodborMenu is not a function" {file: "http://ek.ua/k298.htm" line: 651}]\n@http://ek.ua/k298.htm:651:81\ni@http://ek.ua/js/ek_top_mobi.min.js?v=v1.13.11:2:27272\nfireWith@http://ek.ua/js/ek_top_mobi.min.js?v=v1.13.11:2:28045\nz@http://ek.ua/js/ek_top_mobi.min.js?v=v1.13.11:2:76348\nc/<@http://ek.ua/js/ek_top_mobi.min.js?v=v1.13.11:2:79926\n', u'[console.timeStamp(CSI/tbsd_) https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en._hxuXxdRXI8.O/m=client,plusone/rt=j/sv=1/d=1/ed=1/am=QQ/rs=AGLTcCO8kUWucn-xAWKax-NjNuO__04Qew/cb=gapi.loaded_0:622:127]', u'[console.timeStamp(CSI/_tbnd) https://apis.google.com/_/scs/apps-static/_/js/k=oz.gapi.en._hxuXxdRXI8.O/m=client,plusone/rt=j/sv=1/d=1/ed=1/am=QQ/rs=AGLTcCO8kUWucn-xAWKax-NjNuO__04Qew/cb=gapi.loaded_0:622:127]', u'[JavaScript Warning: "Content Security Policy: Ignoring \'unsafe-inline\' within script-src: strict-dynamic specified"]', u'[JavaScript Warning: "Content Security Policy: Ignoring https: within script-src: strict-dynamic specified"]', u'[JavaScript Warning: "Content Security Policy: Ignoring http: within script-src: strict-dynamic specified"]', u'[JavaScript Warning: "Content Security Policy: Ignoring \'unsafe-inline\' within script-src: strict-dynamic specified"]', u'[JavaScript Warning: "Content Security Policy: Ignoring https: within script-src: strict-dynamic specified"]', u'[JavaScript Warning: "Content Security Policy: Ignoring http: within script-src: strict-dynamic specified"]', u'[JavaScript Error: "ReferenceError: Eski is not defined" {file: "http://ek.ua/k298.htm" line: 1}]\nonclick@http://ek.ua/k298.htm:1:102\n']

From webcompat.com with ❤️

[cipriansv]

Thanks for the report, I was also able to reproduce the issue.

Tested with: Browser / Version: Firefox Nightly Mobile 66.0a1 (2018-12-13), Chrome Mobile 71.0.3578.99 Operating System: Huawei P10 (Android 8.0) - 1080 x 1920 pixels (~432 ppi pixel density)

This is the web page displayed in Firefox Nightly after pressing the indicated button:

And this is the web page displayed in Chrome:

[karlcow]

This site has another issue described in #16196

[karlcow]

Still happening in latest nightly. The button has an onclick attribute. calling show()

function onclick(event) {
  EKmobi.rightMenu.show();
}

also in http://ek.ua/eskimobi/js/common.min.js?v=v1.13.11

  $('.right-menu-show').on('click', function () {
    EKmobi.rightMenu.show()
  });

This is obviously working because the dark area comes into sight. This is hard to debug because the content with the script seems to be wrapped in a

<script type="text/template" data-mobi-tpl="list/brands_presets">
…
</script>

hence you can't set a breakpoint inside.

The menu itself is made by

<div id="right-menu">
  <div class="filter_scroll">
    <div class="filter_podbor open" id="j_match_form">
      <div class="ib rm-tab-open" jtarget="j_match_form" jjs="var t = $(this).parent();var d = 250;try {d = window.tooltip.settings.anim_duration;} catch (e){}if (t.hasClass('open')) {setTimeout(function() {t.removeClass('open')}, d);} else {t.addClass('open')};m_match.sendRequest(undefined,1);" jtype="click" jclose="j_match_form" data-source="http://ek.ua/mtools/dot_output/mui_menu_podbor.php?katalog_=298"></div>
    </div>
  </div>
  <div class="filter_podbor__fb-panel"></div>
</div>

which contains a script for fetching data. These data are an html fragment. The content is being downloaded at first page request before clicking on the button (as seen on the network). So when clicking it should just show it, but somehow don't.

And as we see above this is not shown either in the DOM.

I'm clueless. Do you have an idea @wisniewskit to untie this?

[wisniewskit]

@karlcow, Funny enough, the sliding animation and grey background are just fine, but the content that is supposed to be uncovered was never rendered to begin with, and the reason is that they're using Mobify.

In Chrome, the stuff that shows up under the slide involves CSS classes like "filter_podbor__price-l", and since I see this console warning in Firefox, it seems likely that it's an HTML fragment that isn't being rendered properly in Firefox:

TypeError: window._rightPodborMenu is not a function    k298.htm:658:81
    <anonymous> http://ek.ua/k298.htm#:658 i http://ek.ua/js/ek_top_mobi.min.js?v=v1.13.11:2 fireWith http://ek.ua/js/ek_top_mobi.min.js?v=v1.13.11:2 z http://ek.ua/js/ek_top_mobi.min.js?v=v1.13.11:2 c http://ek.ua/js/ek_top_mobi.min.js?v=v1.13.11:2 

That string appears in this script:

        rightMenu: function(a) {
            window.jqXHRcache = {};
            window._rightPodborMenu = function(m) {
                var n = m.querySelector("#j_match_form");
                var z = ".helping";

However, this never runs, because Mobify tries to load code by using document.write after page-load, which causes the window environment to be wiped out. So this is basically another case of Mobify doing Chrome-specific stuff. I think our only practical recourse here is going to be to wait for Firefox to match Chrome's behavior in this bug. Mobify re-writes the HTML of the document in that init-script by calling a script fragment like this, despite the document.readyState already being interactive (meaning the window environment will be erased per the previous standard):

n.prototype.render = function(y) {
  var v = function() {
    setTimeout(function() {
        x.open("text/html", "replace");
        x.write(w);
        x.close()
    })
  // etc
};

Closing this as a dupe of bz1456313.

[lock[bot]]

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue at https://webcompat.com/issues/new if you are experiencing a similar problem.