[Problem/Bug]: WebView2 v152+ enforces CSS inheritance on app-region: drag, causing unintended drag regions

What happened?

Summary

We recently spent some time debugging a severe regression in our application after the Evergreen WebView2 Runtime updated to version 152.0.4191.x. We are sharing our findings here to help other developers who might run into the same issue.

If your application uses borderless windows with custom drag regions (app-region: drag / -webkit-app-region: drag), you may find that tooltips, dropdowns, or overlay buttons suddenly act as drag handles and swallow mouse clicks.

Root Cause

WebView2 v152 pulled in upstream Chromium commit 9100cdc8 (implementing CSSWG issue 13101), which enforces explicit CSS inheritance for the window-drag / app-region properties.

Previously, if you had a parent container with app-region: drag, an overflowed child element (like a floating tooltip) did not inherit the drag behavior. In v152+, overflowed children now automatically inherit app-region: drag. If you rely on native Win32 hit-testing (e.g., GetNonClientRegionAtPoint), the OS will treat these elements as HTCAPTION, turning standard clicks into window drag events.

The Workaround / Fix

To fix this, you must explicitly declare app-region: no-drag; (and -webkit-app-region: no-drag;) on any interactive overlays, tooltips, or modals that sit on top of a draggable surface.

Recommendation for the WebView2 Team

Since this is an intentional standards-alignment change from Chromium, we are not expecting a code fix. However, because this is a silent breaking change for desktop applications utilizing GetNonClientRegionAtPoint, we recommend adding a note about this behavioral shift to the WebView2 release notes or documentation for v152 to save other developers from having to bisect this regression.

Importance

Important. My app's user experience is significantly compromised.

Runtime Channel

Stable release (WebView2 Runtime)

Runtime Version

152.0.4191.53

SDK Version

No response

Framework

Win32

Operating System

Windows 11

OS Version

No response

Repro steps

1. Create a borderless/frameless WebView2 window that relies on GetNonClientRegionAtPoint (or IsNonClientRegionSupportEnabled) to handle window dragging.
2. Load an HTML document containing a parent element configured as a drag region, and a child interactive element (like a button) that overflows or sits within it, without explicitly disabling the drag region.

Minimal HTML/CSS Example:

<style>
  .main-container {
    -webkit-app-region: drag; /* Parent is draggable */
    height: 100vh;
    background: #f0f0f0;
  }
  .tooltip-button {
    /* Missing -webkit-app-region: no-drag; */
    position: absolute;
    top: -20px; /* Overflowing the standard flow */
    cursor: pointer;
  }
</style>

<div class="main-container">
  <button class="tooltip-button" onclick="alert('Clicked!')">
    Click Me
  </button>
</div>

3. Attempt to left-click the "Click Me" button.

Expected Behavior:
The button registers the click event (triggering the alert) and behaves as a standard interactive web element. (This was the behavior in WebView2 v151 and earlier, as the overflowed child did not inherit the drag property).

Actual Behavior:
The click event is swallowed by the OS. GetNonClientRegionAtPoint reports the button as a drag region (HTCAPTION), and holding the mouse down initiates a window drag/move action instead of clicking the button.

Repros in Edge Browser

No, issue does not reproduce in the corresponding Edge version

Regression

Regression in newer Runtime

Last working version (if regression)

Runtime 151.0.4129.50