lively
lively copied to clipboard
rocksdanister
Lively Wallpaper picks up wrong scaling factor for the second monitor
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
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
~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.
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.
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.
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.
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
Can you try to reproduce the issue in beta build: https://github.com/rocksdanister/lively-beta/releases/tag/v2.1.0.1
@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>
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.
Yes, old cef wont work with newer builds.
How are you testing to verify the scaler issue?