Sharp Edges for Frameless App on Mac

[Debdut]

Description

The edges of an frameless window in sharp on Mac

To Reproduce

Use these options in your wails app

err := wails.Run(&options.App{
    Title:            "codeui",
    Width:            800,
    Height:           600,
    Assets:           assets,
    BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
    OnStartup:        app.startup,
    Bind: []interface{}{
        app,
    },
    Frameless: true,
    Mac: &mac.Options{
        WindowIsTranslucent:  true,
        WebviewIsTransparent: true,
    },
})

Expected behaviour

The borders must be rounded!

Screenshots

No response

Attempted Fixes

No response

System Details

System
------
OS:		MacOS
Version: 	12.5
ID:		21G72
Go Version:	go1.18.3
Platform:	darwin
Architecture:	amd64

Wails
------
Version: 	v2.0.0-beta.44.2

Dependency			Package Name	Status		Version
----------			------------	------		-------
xcode command line tools  	N/A 		Installed 	2395
npm  				N/A 		Installed 	8.5.5
*upx  				N/A 		Installed 	upx 3.96
*nsis  				N/A 		Available 	

* - Optional Dependency

Diagnosis
---------
Your system is ready for Wails development!

Additional context

No response

[raguay]

On your background color, set it to transparent (A: 0). In the CSS for the body, set the border-radius for the body to the amount of curvature you want with a transparent boarder with 1 px width. It works great for my applications once built, but the dev mode doesn't render the transparency correctly.

[Debdut]

Oh I was checking the dev mode only, seems like dev mode only bug! Thanks 🙏🏻

[leaanthony]

I'm struggling to understand why this would be true only in dev mode 🤔 Can you pinpoint why that might be?

[raguay]

I have no idea. I've tried everything and it never works right in dev mode. But, that isn't a deal breaker.

On Wed, Aug 31, 2022 at 4:16 PM Lea Anthony @.***> wrote:

I'm struggling to understand why this would be true only in dev mode 🤔

— Reply to this email directly, view it on GitHub https://github.com/wailsapp/wails/issues/1805#issuecomment-1232684797, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAS7JRYRVYG4AY2CLHQMFKTV34PH5ANCNFSM6AAAAAAQAFIKWE . You are receiving this because you commented.Message ID: @.***>

[Debdut]

Thanks guys 🙏

@leaanthony should I close this or keep it open? or shall I create a small repo where this thing is replicated?

[leaanthony]

Yeah, I'd like to know why!

[raguay]

BTW: change this line:

BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},

To:

BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 0},

I believe the problem is not having the main.go file set the background to transparent. I just went through and did that on some of my projects and the dev mode started working better.

[leaanthony]

That sounds insane 😂 I'll have a look this weekend...

EDIT: Looks like you were on the right path 😉 https://stackoverflow.com/questions/9962983/objective-c-rounded-corner-custom-window

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.