CSS Transparency Effect Causes Ghosting

[TaterTotX]

Description

WebviewIsTransparent: true,

html {
background-color: rgba(123, 140, 157, 0);
text-align: center;
}

I'm experiencing a ghosting effect in my built app that doesn't occur in the web display. When I apply a transparency effect to an element in CSS, such as a background or a border, a faint duplicate of the element appears to trail behind it as it moves. This issue is noticeable during animations or when the element has a moving background.

To Reproduce

Apply transparency to an element using CSS, e.g., background-color: rgba(0, 0, 0, 0.5);
Animate or move the element, such as changing its position or opacity.

Expected behaviour

The transparent element should move smoothly without any ghosting or trail effect, similar to the behavior in the web display.

Screenshots

Attempted Fixes

No response

System Details

macos 14.2 (23C64)

Additional context

No response

[leaanthony]

I can't tell what element is being ghosted here but I do know it's likely nothing to do with Wails.

[TaterTotX]

I can't tell what element is being ghosted here but I do know it's likely nothing to do with Wails.

Steps to Reproduce

wails init -n ghost_test -t vue

wails dev

app.vue

<script setup> import HelloWorld from './components/HelloWorld.vue' </script> <style> </style>

func main() {
// Create an instance of the app structure
app := NewApp()

// Create application with options
err := wails.Run(&options.App{
	Title:  "ghost_test",
	Width:  1024,
	Height: 768,
	AssetServer: &assetserver.Options{
		Assets: assets,
	},
	BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 0},
	OnStartup:        app.startup,
	Bind: []interface{}{
		app,
	},

	Mac: &mac.Options{
		WebviewIsTransparent: true,
	},
})

if err != nil {
	println("Error:", err.Error())
}

}