CSS/Rendering issue in Microsoft Edge: Background-overlay clipping on high-DPI displays?

Edge on high‑DPI Windows displays can expose subtle sub‑pixel layout and rendering issues, especially where fixed backgrounds, overlays, and blended content meet section boundaries.

From the available information, the most relevant guidance is to treat this as a rendering performance/layout problem and focus on reducing layout and paint complexity rather than using vendor prefixes or flags.

Actionable steps based on the documented guidance:

1. Use Edge DevTools Performance tool to confirm the issue
   1. Open the page in Edge.
   2. Open DevTools → Performance.
   3. Record while scrolling through the hero into the next section on the high‑DPI display.
   4. Look for:
      • Large Recalculate Style events (purple) that might indicate complex style interactions at the section boundary.
      • Layout events with red bars indicating forced synchronous layouts. If the shimmer coincides with heavy style/layout work, simplify the CSS around that boundary.
2. Simplify CSS around the hero/next section boundary The documentation recommends:
   • Avoid CSS that triggers layout and complex paint where possible.
   • Avoid complex, deeply nested selectors; prefer simple class selectors for the hero container, overlay, and next section.
   Concretely for the hero boundary:
   • Ensure the hero and the next section share the same background color at the seam (behind the overlay) so any 1px rounding gap is visually hidden.
   • Avoid mixing background-attachment: fixed with transforms on ancestor elements near the seam, as this can increase layout/paint complexity.
   • If using background-blend-mode, test whether moving the blend to a pseudo‑element or separate overlay layer reduces the visible seam.
3. Minimize layout thrashing in centering logic If the CTA centering logic uses JavaScript that reads and writes layout values during scroll or resize, this can cause repeated layout recalculations that show up as subtle visual artifacts on high‑DPI screens. The guidance is:
   • Batch DOM reads first, then DOM writes, instead of alternating read/write in a loop.
   • Consider using a helper like the FastDom pattern mentioned in the documentation to automatically batch read/write operations.
4. Prefer CSS transforms that avoid layout when animating
   • For any scroll/resize effects near the hero seam, prefer transform and opacity over properties that change geometry (width, height, top, left, margin, etc.), since those trigger layout and more expensive paint.
   • This reduces the chance that sub‑pixel rounding differences become visible as a 1px shimmer.
5. Check for pixel‑perfect, hard‑coded alignments The IE mode FAQ notes that pixel‑based alignments can lead to rendering differences between engines. For a hero layout that must look seamless:
   • Avoid relying on exact pixel boundaries between sections; use overlapping backgrounds or slight negative margins so that any rounding error is hidden.
   • Ensure that the overlay and the next section either overlap by 1–2px or share a common background color at the seam.
6. Treat it as a DPI/scaling edge case and report it High‑DPI scaling is described as a complex area with ongoing improvements. If the shimmer only appears at certain scale factors (like 150%) and only in Edge:
   • Capture screenshots or video on the high‑DPI device.
   • Record the monitor configuration (resolution, scaling percentage) and exact Edge/Windows versions.
   • Use Feedback Hub on Windows (Start → Feedback Hub) to submit a repro with these details so the Edge team can investigate a potential rendering bug.

There is no documented vendor‑specific CSS prefix or Chromium flag in the provided material that targets background-blend-mode or overlay stability under Windows display scaling. The recommended approach is to simplify layout and paint around the seam, avoid layout‑triggering properties and complex selectors, batch DOM reads/writes, and treat any remaining artifact as a candidate product bug to be reported with full DPI/scaling details.

References:

• Troubleshooting common performance issues
• Style
• Layout
• Internet Explorer (IE) mode troubleshooting and FAQ
• Windows scaling issues for high-DPI devices (Surface Pro 3, Surface Pro 4, or Surface Book)