[windows] Prevent a thin white line at the bottom of a frameless window (#2111)

This seems to be only a problem on some Windows versions.

v2/internal/frontend/desktop/windows/frontend.go

@@ -130,7 +130,9 @@ func (f *Frontend) WindowSetDarkTheme() {
 func (f *Frontend) Run(ctx context.Context) error {
 	f.ctx = ctx
 
-	mainWindow := NewWindow(nil, f.frontendOptions, f.versionInfo)
+	f.chromium = edge.NewChromium()
+
+	mainWindow := NewWindow(nil, f.frontendOptions, f.versionInfo, f.chromium)
 	f.mainWindow = mainWindow
 
 	var _debug = ctx.Value("debug")
@@ -141,8 +143,6 @@ func (f *Frontend) Run(ctx context.Context) error {
 	f.WindowCenter()
 	f.setupChromium()
 
-	f.mainWindow.notifyParentWindowPositionChanged = f.chromium.NotifyParentWindowPositionChanged
-
 	mainWindow.OnSize().Bind(func(arg *winc.Event) {
 		if f.frontendOptions.Frameless {
 			// If the window is frameless and we are minimizing, then we need to suppress the Resize on the
@@ -406,8 +406,8 @@ func (f *Frontend) Quit() {
 }
 
 func (f *Frontend) setupChromium() {
-	chromium := edge.NewChromium()
-	f.chromium = chromium
+	chromium := f.chromium
+
 	if opts := f.frontendOptions.Windows; opts != nil {
 		chromium.DataPath = opts.WebviewUserDataPath
 		chromium.BrowserPath = opts.WebviewBrowserPath
@@ -421,7 +421,6 @@ func (f *Frontend) setupChromium() {
 	}
 	chromium.Embed(f.mainWindow.Handle())
 	chromium.Resize()
-	f.mainWindow.chromium = chromium
 	settings, err := chromium.GetSettings()
 	if err != nil {
 		log.Fatal(err)

v2/internal/frontend/desktop/windows/go-webview2/pkg/edge/chromium.go

@@ -16,6 +16,8 @@ import (
 	"golang.org/x/sys/windows"
 )
 
+type Rect = w32.Rect
+
 type Chromium struct {
 	hwnd                  uintptr
 	controller            *ICoreWebView2Controller
@@ -31,6 +33,8 @@ type Chromium struct {
 
 	environment *ICoreWebView2Environment
 
+	padding Rect
+
 	// Settings
 	Debug       bool
 	DataPath    string
@@ -120,6 +124,33 @@ func (e *Chromium) Embed(hwnd uintptr) bool {
 	return true
 }
 
+func (e *Chromium) SetPadding(padding Rect) {
+	if e.padding.Top == padding.Top && e.padding.Bottom == padding.Bottom &&
+		e.padding.Left == padding.Left && e.padding.Right == padding.Right {
+
+		return
+	}
+
+	e.padding = padding
+	e.Resize()
+}
+
+func (e *Chromium) Resize() {
+	if e.hwnd == 0 {
+		return
+	}
+
+	var bounds w32.Rect
+	w32.User32GetClientRect.Call(e.hwnd, uintptr(unsafe.Pointer(&bounds)))
+
+	bounds.Top += e.padding.Top
+	bounds.Bottom -= e.padding.Bottom
+	bounds.Left += e.padding.Left
+	bounds.Right -= e.padding.Right
+
+	e.SetSize(bounds)
+}
+
 func (e *Chromium) Navigate(url string) {
 	e.webview.vtbl.Navigate.Call(
 		uintptr(unsafe.Pointer(e.webview)),

v2/internal/frontend/desktop/windows/go-webview2/pkg/edge/chromium_386.go

@@ -8,12 +8,11 @@ import (
 	"unsafe"
 )
 
-func (e *Chromium) Resize() {
+func (e *Chromium) SetSize(bounds w32.Rect) {
 	if e.controller == nil {
 		return
 	}
-	var bounds w32.Rect
-	w32.User32GetClientRect.Call(e.hwnd, uintptr(unsafe.Pointer(&bounds)))
+
 	e.controller.vtbl.PutBounds.Call(
 		uintptr(unsafe.Pointer(e.controller)),
 		uintptr(bounds.Left),

v2/internal/frontend/desktop/windows/go-webview2/pkg/edge/chromium_amd64.go

@@ -8,12 +8,11 @@ import (
 	"unsafe"
 )
 
-func (e *Chromium) Resize() {
+func (e *Chromium) SetSize(bounds w32.Rect) {
 	if e.controller == nil {
 		return
 	}
-	var bounds w32.Rect
-	w32.User32GetClientRect.Call(e.hwnd, uintptr(unsafe.Pointer(&bounds)))
+
 	e.controller.vtbl.PutBounds.Call(
 		uintptr(unsafe.Pointer(e.controller)),
 		uintptr(unsafe.Pointer(&bounds)),

v2/internal/frontend/desktop/windows/go-webview2/pkg/edge/chromium_arm64.go

@@ -9,14 +9,11 @@ import (
 	"github.com/wailsapp/wails/v2/internal/frontend/desktop/windows/go-webview2/internal/w32"
 )
 
-func (e *Chromium) Resize() {
+func (e *Chromium) SetSize(bounds w32.Rect) {
 	if e.controller == nil {
 		return
 	}
 
-	var bounds w32.Rect
-	w32.User32GetClientRect.Call(e.hwnd, uintptr(unsafe.Pointer(&bounds)))
-
 	words := (*[2]uintptr)(unsafe.Pointer(&bounds))
 	e.controller.vtbl.PutBounds.Call(
 		uintptr(unsafe.Pointer(e.controller)),

v2/internal/frontend/desktop/windows/window.go

@@ -21,7 +21,6 @@ type Window struct {
 	winc.Form
 	frontendOptions                          *options.App
 	applicationMenu                          *menu.Menu
-	notifyParentWindowPositionChanged        func() error
 	minWidth, minHeight, maxWidth, maxHeight int
 	versionInfo                              *operatingsystem.WindowsVersionInfo
 	isDarkMode                               bool
@@ -39,7 +38,7 @@ type Window struct {
 	chromium *edge.Chromium
 }
 
-func NewWindow(parent winc.Controller, appoptions *options.App, versionInfo *operatingsystem.WindowsVersionInfo) *Window {
+func NewWindow(parent winc.Controller, appoptions *options.App, versionInfo *operatingsystem.WindowsVersionInfo, chromium *edge.Chromium) *Window {
 	result := &Window{
 		frontendOptions: appoptions,
 		minHeight:       appoptions.MinHeight,
@@ -49,6 +48,7 @@ func NewWindow(parent winc.Controller, appoptions *options.App, versionInfo *ope
 		versionInfo:     versionInfo,
 		isActive:        true,
 		themeChanged:    true,
+		chromium:        chromium,
 	}
 	result.SetIsForm(true)
 
@@ -192,9 +192,7 @@ func (w *Window) WndProc(msg uint32, wparam, lparam uintptr) uintptr {
 	case w32.WM_NCLBUTTONDOWN:
 		w32.SetFocus(w.Handle())
 	case w32.WM_MOVE, w32.WM_MOVING:
-		if w.notifyParentWindowPositionChanged != nil {
-			_ = w.notifyParentWindowPositionChanged()
-		}
+		w.chromium.NotifyParentWindowPositionChanged()
 	case w32.WM_ACTIVATE:
 		//if !w.frontendOptions.Frameless {
 		w.themeChanged = true
@@ -269,10 +267,16 @@ func (w *Window) WndProc(msg uint32, wparam, lparam uintptr) uintptr {
 							}
 						}
 					}
+					w.chromium.SetPadding(edge.Rect{})
 				} else {
 					// This is needed to workaround the resize flickering in frameless mode with WindowDecorations
 					// See: https://stackoverflow.com/a/6558508
-					rgrc.Bottom -= 1
+					// The workaround originally suggests to decrese the bottom 1px, but that seems to bring up a thin
+					// white line on some Windows-Versions, due to DrawBackground using also this reduces ClientSize.
+					// Increasing the bottom also worksaround the flickering but we would loose 1px of the WebView content
+					// therefore let's pad the content with 1px at the bottom.
+					rgrc.Bottom += 1
+					w.chromium.SetPadding(edge.Rect{Bottom: 1})
 				}
 
 				return 0

website/src/pages/changelog.mdx

@@ -21,8 +21,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 - The `noreload` flag in wails dev wasn't applied. Fixed by @stffabi in this [PR](https://github.com/wailsapp/wails/pull/2081)
-- `build/bin` folder was duplicating itself on each reload in `wails dev`
-mode. Fixed by @OlegGulevskyy in this [PR](https://github.com/wailsapp/wails/pull/2103)
+- `build/bin` folder was duplicating itself on each reload in `wails dev` mode. Fixed by @OlegGulevskyy in this [PR](https://github.com/wailsapp/wails/pull/2103)
+- Prevent a thin white line at the bottom of a frameless window on Windows. Fixed by @stffabi in this [PR](https://github.com/wailsapp/wails/pull/2111)
 
 ## v2.2.0 - 2022-11-09