Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
BrushXue opened this issue Nov 10, 2023 · 10 comments
Open

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

BrushXue opened this issue Nov 10, 2023 · 10 comments
Labels
bug Something isn't working

Comments

@BrushXue
Copy link

BrushXue commented Nov 10, 2023

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

@BrushXue BrushXue added the bug Something isn't working label Nov 10, 2023
@rocksdanister
Copy link
Owner

rocksdanister commented Nov 11, 2023

Looks like the focus stealing patch caused this. Its Chromium change
cefsharp/CefSharp#2927 (comment)

Chromium switched to PerMonitorV2 scaling by default.

Possible ways to fix this:

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

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

@BrushXue
Copy link
Author

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

This comment was marked as outdated.

@BrushXue
Copy link
Author

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

@ccresz
Copy link

ccresz commented Nov 17, 2023

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:
image

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

This comment was marked as off-topic.

@rocksdanister

This comment was marked as outdated.

@rocksdanister
Copy link
Owner

rocksdanister commented May 18, 2024

@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
Copy link
Author

BrushXue commented May 23, 2024

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
Copy link
Owner

Yes, old cef wont work with newer builds.

How are you testing to verify the scaler issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working
Projects
None yet
Development

No branches or pull requests

4 participants