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
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};
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?
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 };
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.
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.