Getting different width in chrome vs Firefox

[mrSingh007]

Current State On very first click in chrome width of pop layout is small as compared to width of content in Firefox. In chrome if second time same pop-up is triggered (colorbox) then the width/height are correct and width/height is same as in Firefox

After deep analysis it is found that this part of function is inconsistent and gives different results.

$loaded.hide().appendTo($loadingBay.show())// content has to be appended to the DOM for accurate size calculations..css({width: getWidth(), overflow: settings.get('scrolling') ? 'auto' : 'hidden'})
        .css({height: getHeight()})// sets the height independently from the width in case the new width influences the value of height.
        .prependTo($content);

        $loadingBay.hide()

Here getWidth function is giving different results in chrome as compared to firefox

Chrome Browser Info:

Google Chrome   69.0.3497.100 (Official Build) (64-bit)
Revision    8920e690dd011895672947112477d10d5c8afb09-refs/branch-heads/3497@{#948}
OS  Linux
JavaScript  V8 6.9.427.23

Jquery version: 3.3.1 Colorbox version: 1.6.4

[mrSingh007]

After further analysis, it was found that as $loaded was hidden when getWidth & getHeight methods were called, which somehow did not calculated correct width and height in chrome but was working fine in Firefox. So the solution of this problem is to keep showing $loaded till width and height is not calculated. Afterwards $loaded.hide(); can be called.

So here is solution for this problem:

 $loaded.appendTo($loadingBay.show()).prependTo($content);
        $loaded.show(); // keep showing so that after rendering width/height can be calculated correct
        $loaded.css({width:getWidth(),height: getHeight(),overflow: settings.get('scrolling') ? 'auto' : 'hidden'});

        $loaded.hide(); //now can be called hide
        $loadingBay.hide();

[mrSingh007]

@jackmoore Please review and take this solution. Thanks