Sharepoint 2013 ribbon is squeezed on Chrome when IsDlg=1

Question

On a Sharepoint 2013 on-premise when we open a page with the parameter IsDlg=1 the ribbon gets squeezed on Chrome (it looks OK on Firefox and IE), even if the ribbon has plenty of space.

Here is how it looks like with Chrome:

And what we except to see (behavior in IE and Firefox):

I searched into the different JS files loaded by Sharepoint but I haven't been able to find how to change/fix this behavior.

If I use the Responsive View on Firefox and if I reduce the window size, then the ribbon is dynamically squeezed when the window size is very small. So I guess there is a JavaScript function that calculates the available width and rebuilds the ribbon based on it. My guess is that function doesn't work properly with Chrome.

Our masterpage has the HTML5 doctype.

Any help will be appreciated.

Thanks

Answer 1

The responsiveness of the suitebar is implemented via the cui.js located at /_layouts/15/cui.js.

The handler that is attaching to the resize is added in the CUI.ScalableRoot.prototype.set_$4k_2 function:

set_$4k_2: function(a) {
    if (a === this.$6s_2)
        return a;
    if (a)
        $addHandler(window, "resize", this.$4R_2);
    else
        try {
            $removeHandler(window, "resize", this.$4R_2)
        } catch (b) {}
    this.$6s_2 = a;
    return a
}

You can add breakpoints in the $CO_2 function to validate that. This function should also be the one initiating the responsive resizing.

Example:

//get pagemanager since it's the only reference to the Ribbon object I could find
var pagemanager = SP.Ribbon.PageManager.get_instance();
//get ribbon
var ribbon = pagemanager.get_ribbon();
//disable the responsive function
ribbon.$CO_2 = function(){};

Answer 2

Check if your chrome Zoom level is less than normal(100%) . if yes then set it to 100 .

Answer 3

So, after many hours of debug, and using the answer from @Mx, I've been able to figure out the problem and find a solution.

There is a 1px difference returned by CUI.Ribbon.prototype.$94_3 causing a call to this.$A_2.scaleDown() in CUI.Ribbon.$Ce_3()... So to fix it I changed the below function that is only called if sp.ribbon.js is loaded. With this method the responsive resizing will work.

SP.SOD.executeOrDelayUntilEventNotified(function() {
  CUI.Ribbon.prototype.$94_3=function() {ULSpEN:;
    if (CUI.ScriptUtility.isNullOrUndefined(this.$9_3)) {
      return 0;
    }
    var diff = this.$f_3.offsetHeight - this.$9_3.get_$3_0().offsetHeight;
    return (diff === -1 ? 0 : diff)
  };
}, "sp.scriptloaded-sp.ribbon.js")