FWD » Core Development » User Interface

To recreate:

1. set the browser zoom to more than 100% (I tested with FF)
2. log into a web client program which draws text using virtual desktop mode

The text is not drawn properly.

This bug is related to deriveFont js function. This diff can fix this issue.

=== modified file 'src/com/goldencode/p2j/ui/client/driver/web/res/p2j.fonts.js'
--- src/com/goldencode/p2j/ui/client/driver/web/res/p2j.fonts.js    2018-02-09 13:53:55 +0000
+++ src/com/goldencode/p2j/ui/client/driver/web/res/p2j.fonts.js    2018-03-27 18:15:51 +0000
@@ -231,7 +231,7 @@
    me.deriveFont = function(font)
    {
       var fd = fontTable[font];
-      var size = Math.round(window.devicePixelRatio * fd.size);
+      var size = Math.round(/*window.devicePixelRatio **/ fd.size);

       if (fd.size != size)
       {

Seems reasonable. Constantin?

Eric Faulhaber wrote:

Seems reasonable. Constantin?

Sergey: please check on all browsers - I've checked on chrome and firefox, and the value of devicePixelRatio is 1 by default; it gets modified depending on the applied zoom. But according to the docs https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio this should really be screen specific, and not (necessarily) related to zoom.

Is there another way to determine the applied zoom in the browser, beside devicePixelRatio?

Constantin Asofiei wrote:

Is there another way to determine the applied zoom in the browser, beside devicePixelRatio?

zooming can be detected by using window.onresize listener, but I don't know how to detect zooming factor if the browsers tab has been zoomed before the target application has been loaded. According to the documentation

The Window property devicePixelRatio returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. This value could also be interpreted as the ratio of pixel sizes: the size of one CSS pixel to the size of one physical pixel. In simpler terms, this tells the browser how many of the screen's actual pixels should be used to draw a single CSS pixel.

This is useful when dealing with the difference between rendering on a standard display versus a HiDPI or Retina display, which use more screen pixels to draw the same objects, resulting in a sharper image.

There is no way to be notified when this value is changed (which can happen, for example, if the user drags the window to a display with a different pixel density). Since there are no callbacks or events available to detect pixel density changes, the only way to do so is to periodically check the value of devicePixelRatio to see if it's changed. Just don't do it too often, or you'll impact performance

Sergey Ivanovskiy wrote:

Constantin Asofiei wrote:

Is there another way to determine the applied zoom in the browser, beside devicePixelRatio?

zooming can be detected by using window.onresize listener, but I don't know how to detect zooming factor if the browsers tab has been zoomed before the target application has been loaded. According to the documentation

OK, then just leave a comment behind in deriveFont, that we can't use devicePixelRatio because of the browser's zoom.

It seems that for desktop browsers this value Math.round(w1*ratio) is constant. For my monitor it always produces 1920 pixel width

   var w1 = window.screen.width;
   var ratio = window.devicePixelRatio;
   console.debug("w1*ratio=" + Math.round(w1*ratio));

No, it can't help because we can't be sure that physical screens use whole number factor 1, 2, 3 and ...

Sergey, thanks for the details, but don't spend any more time on this; just add a comment and we are done with this issue.

Sergey Ivanovskiy wrote:

OK, in this blog there is a solution to the problem how to prevent browsers from zooming web pages https://stackoverflow.com/questions/35216524/how-to-prevent-desktop-browser-chrome-safari-from-zooming-a-webpage
This is the fix with comments.

I'm OK with the change. Do you have any other WIP branch, to put the change there?

No, I have no WIP branch.

Since this is a javascript-only change, it doesn't need to go through ChUI testing. Please create a 3537a branch with this one change and test it with the Hotel GUI web clients (both). Be sure to test with zoom changed before login and with it changed after login. If it passes, merge it to trunk.

I tested GUI web with rev 11242 for desktop. This bug isn't reproduced with 3537a. Planning to merge into the trunc.

3537a has been merged into the trunc as bzr rev 11242.