Cef scaling issue with different windows scaling optoins #2554

michalcourson · 2024-12-29T16:42:44Z

Describe the bug
A cef web wallpaper can fail to scale properly if the worker window is in on a display that has different windows scaling options. It is unclear to me if this is a windows error, or a cef error. Upon calling NativeMethods.SetWindowPos when placing the window on the correct display, the browser size and scaling factor is incorrect. I have a workaround in the lively core service that is working for me.

To Reproduce

Setup displays such that the worker window puts itself on a display with a different scaling factor
Load a web wallpaper using Cef
Scaling will be incorrect

Expected behavior
Scaling factor/resolution is correctly grabbed from the target display.

Screenshots/Video
Video with both failure condition and workaround

Desktop (please complete the following information):

OS: windows 11

Test wallpaper:
<!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>

  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();
}
updateValues();
window.addEventListener('resize', function(event){
  updateValues();
});

</script>
</body>
</html>

Additional context
Add any other context about the problem here.

Log file (Important)
20241229_110618.txt

The text was updated successfully, but these errors were encountered:

michalcourson added the bug Something isn't working label Dec 29, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Cef scaling issue with different windows scaling optoins #2554

Cef scaling issue with different windows scaling optoins #2554

michalcourson commented Dec 29, 2024 •

edited

Loading

Cef scaling issue with different windows scaling optoins #2554

Cef scaling issue with different windows scaling optoins #2554

Comments

michalcourson commented Dec 29, 2024 • edited Loading

michalcourson commented Dec 29, 2024 •

edited

Loading