Lively Wallpaper picks up wrong scaling factor for the second monitor

BrushXue commented 10 months ago

Describe the bug I have a main monitor, 3840x2160 at 200%, and a side screen, 480x1920 at 100%. I've been using Lively Wallpaper for a long time, until a recent update from Microsoft store break everything. Looks like lively wallpaper is picking up the scaling factor from the main monitor and scales the html page on the side screen at 200%.

To Reproduce You need two monitors to trigger this.

Expected behavior It should pick up the corresponding scaling factor of the monitor.

Screenshots/Video Screenshot 2023-11-10 143335

Desktop (please complete the following information):

OS: Windows 11 22H2
AIDA64 RemoteSensor

Additional context Should be related to a recent commit.

Log file (Important) lively_log_20231110_143736.zip

rocksdanister commented 10 months ago

~Looks like the focus stealing patch caused this.~ Its Chromium change https://github.com/cefsharp/CefSharp/issues/2927#issuecomment-1457456272

Chromium switched to PerMonitorV2 scaling by default.

Possible ways to fix this:

Force the web wallpapers to use 1.0 scaling on all displays.
Force per monitor scaling factor by sending the value from Core.
Updated project manifest.

I am leaning towards (1) at the moment, will try (2) and (3) first but that will require some testing.

BrushXue commented 9 months ago

Tried to manually install v2.0.7.0, the scaling is 100%. But sometimes the wallpaper disappears as mentioned in v2.0.7.4 changelog.

I'm not sure about (1). It might break someone else's setup. Probably the easiest way is adding an advanced option to allow users manually override the scaling factor.

rocksdanister commented 9 months ago

If you want a quick fix for the time being you can use old browser build with v2.0.7.4 by copying it to <install_location>/Plugins/Cef folder.

BrushXue commented 9 months ago

Thanks. Currently I don't see there's any potential bug.

ccresz commented 9 months ago

Having the same issue, glad you guys can reproduce it, it was driving me insane trying to figure out what was going on.

In case is useful:

This is my display arrangement: Monitor 1: 2560 x 1600 at 150% (this is my primary monitor) Monitor 2: 3840 x 2160 at 200% Monitor 3: 1200 x 1920 at 150 (portrait) Monitor 4: 3440 x 1440 at 100% (this is were I use lively on, oled)

When the screensaver comes up uses like a half of the screen only.

momoe commented 9 months ago

I believe I'm having this issue (or very similiar) I have my 4k display set to 200% UI scaling in Win11 display settings, however running Lively's Rain wallpaper will make the wallpaper look more pixelated.

I have attempted to use the DpiScalling setting it to Application control, but none of the values seem to have any affect on this. But if I set my Windows DPI scale down to 100% it will render the droplet effects at their detailed resolution

EDIT

After going into the lively.exe properties, and setting the DPI scaling of that to 'System' appears to have resolved the scaling issue if this helps anyone else

rocksdanister commented 3 months ago

Can you try to reproduce the issue in beta build: https://github.com/rocksdanister/lively-beta/releases/tag/v2.1.0.1

rocksdanister commented 3 months ago

@momoe The rain issue is unrelated to this issue and more about how the page code handles scale factor, it behaves the same as you change browser scale and will require wallpaper code change. Can verify on chrome: https://www.rocksdanister.com/rain You will need to adjust the scale value to match the browser setting, ie 2 = 200% scaling: https://github.com/rocksdanister/lively-webpage/blob/b2987c814c6bd8ada7437800e6c8c37d698cefec/js/script.js#L15 I'll need to update the wallpaper to adjust this dynamically.

I can't seem to reproduce the original issue on my side with triple monitor at different scale settings on the beta build of Lively. I used the following html wallpaper to verify scale factor of each display:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Browser Info</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .info {
            margin: 10px 0;
        }
        .label {
            font-weight: bold;
        }
    </style>
</head>
<body>
    <h1>Browser Information</h1>
    <div class="info">
        <span class="label">Scale Factor:</span>
        <span id="scaleFactor"></span>
    </div>
    <div class="info">
        <span class="label">Screen Resolution:</span>
        <span id="screenResolution"></span>
    </div>
    <div class="info">
        <span class="label">Browser Window Size:</span>
        <span id="windowSize"></span>
    </div>
    <div class="info">
        <span class="label">User Agent:</span>
        <span id="userAgent"></span>
    </div>
    <div class="info">
        <span class="label">Browser Version:</span>
        <span id="browserVersion"></span>
    </div>

    <script>
        function getScaleFactor() {
            return window.devicePixelRatio;
        }

        function getScreenResolution() {
            return `${window.screen.width} x ${window.screen.height}`;
        }

        function getWindowSize() {
            return `${window.innerWidth} x ${window.innerHeight}`;
        }

        function getUserAgent() {
            return navigator.userAgent;
        }

        function getBrowserVersion() {
            let userAgent = navigator.userAgent;
            let match = userAgent.match(/(Chrome|Firefox|Safari|Edge)\/(\d+)/);
            if (match) {
                return `${match[1]} ${match[2]}`;
            }
            return 'Unknown';
        }

        document.getElementById('scaleFactor').textContent = getScaleFactor();
        document.getElementById('screenResolution').textContent = getScreenResolution();
        document.getElementById('windowSize').textContent = getWindowSize();
        document.getElementById('userAgent').textContent = getUserAgent();
        document.getElementById('browserVersion').textContent = getBrowserVersion();
    </script>
</body>
</html>

BrushXue commented 3 months ago

Can you try to reproduce the issue in beta build: https://github.com/rocksdanister/lively-beta/releases/tag/v2.1.0.1

I'm still getting the wrong scaling with this beta version.

This time, copying the old Cef folder from 2.0.7.0 no longer works.

rocksdanister commented 3 months ago

Yes, old cef wont work with newer builds.

How are you testing to verify the scaler issue?

rocksdanister / lively

Lively Wallpaper picks up wrong scaling factor for the second monitor #1996