dijit/MenuBar & CSS transform cause erroneous placement

Dojo 1.x users
1

In my app. I use CSS like this, to enlarge all:

html {
transform: scale(1.5);
transform-origin: top left;
width: 66.66%;
height: 66.66%;
}

Unfortunately, the drop-down menus activated from the menu bar are placed in the wrong position (Tested on Chromium & Firefox).
Unfortunately not all browsers support the CSS “zoom” attribute, which works correctly (tested on Chromium).

Do you know a possible work-around, path code or an idea to deal with this problem?

Regards
Guido Brugnara

2

I’ve analyzed the problem. It is a matter of the implementation of the class dojo/dom-geometry, method ::position() because it uses at row 479 (rel.1.13.0 ) the native method node.getBoundingClientRect() that return coordinates in pixels with the zoom applied to “html” TAG;
A work around was to replace the next row 480 with the next two rows to restore the original scale:

var coeff = 0.666667;
ret = {x: ret.left * coeff, y: ret.top * coeff, w: (ret.right - ret.left) * coeff, h: (ret.bottom - ret.top) * coeff};

3

The best path is to replace rows 479-480 with this row:

var ret = {x: node.offsetLeft, y: node.offsetTop, w: node.clientWidth, h: node.clientHeight };

(Tested on Firefox & Chromium)

Method getBoundingClientRect is used in other classes, so I think the problem persists if we use other parts of Dojo Toolkit.
A question to the Dojo Toolkit authors: is there a particular reason to use the getBoundingClientRect method instead of attributes?
Do you consider it appropriate to deprecate the use of getBoundingClientRect?

4

In case of nested DOM Object my work-around not work, but we can resolve using this code:

var el = node, offsetLeft = 0, offsetTop  = 0;
do{
    offsetLeft += el.offsetLeft;
    offsetTop  += el.offsetTop;
    el = el.offsetParent;
} while( el );
var ret = {x: offsetLeft, y: offsetTop, w: node.clientWidth, h: node.clientHeight };
5

It’s safe to say that a lot of Dojo 1.x widgets and their behavior was designed before more modern CSS techniques were implemented in browsers.

If you’d like to raise a pull request against Dojo or Dijit for these changes, we’re happy to review and land in a future release.

1 Like
6

Ok, thanks.
I looked in the code how many occurrences of “getBoundingClientRect” there are and there are few.
We could replace the standard method with a new method (same name or like) of the dojo/dom-geometry class that also works with scale transformations in CSS.
Unfortunately I’m not familiar with Git (we use Subversion at the company) but I can try to use it after I’ve tested the modifications suggested here.