Allow setting the browser's background color during attributes #197

chippers · 2021-04-23T19:23:28Z

Is your feature request related to a problem? Please describe.
Allow the user to set a background color for the webview window to render while loading content. This is typically the step between the os window initializing the webview, and the webview initializing the application.
tauri-apps/tauri#1564 (my comment)

Describe the solution you'd like
Having a background_color field on wry::Attributes (I think that is the proper place for it).
I don't know which format we should accept the color in...

hex string?
rgb struct?
rgb tuple?
other?

Describe alternatives you've considered
none yet

Would you assign yourself to implement this feature?

Yes
No (I am not familiar with the macOS code and don't have access to an macOS machine)

Additional context
The linux part seems easy enough once a format for accepting the color is decided on. Some pseudo-code to replace:

wry/src/webview/linux/mod.rs

Lines 138 to 146 in 765fe5a

    
           // Transparent 
        
           if transparent { 
        
             webview.set_background_color(&RGBA { 
        
               red: 0., 
        
               green: 0., 
        
               blue: 0., 
        
               alpha: 0., 
        
             }); 
        
           }

with

let alpha = (!transparent) as i8 as f64;
webview.set_background_color(&RGBA {
  red: bg_color.red,
  green: bg_color.green,
  blue: bg_color.blue,
  alpha,
});

assuming bg_color is some sort of struct with red, blue, green fields of f64.

I assume webview2 and macOS has a way of setting the background color but I'm not familiar with them yet

The text was updated successfully, but these errors were encountered:

lucasfernog · 2021-04-23T19:30:53Z

hex string?

rgb struct?

rgb tuple?

other?

I think we're following whatever is the standard on the winit API.

amrbashir · 2021-04-23T19:35:16Z

if we allow setting the webview background color, I think users will also expect the winit::Window to be of that color too.

So I think we can do one of the following:

Always set the webview background to be transparent and provide a method on winit::WindowBuilder to change the color (ideally we want to set the color before showing it).
Change both the webview and the winit::Window.

As to which format, winit has a unix specific struct called ARGBColor
https://docs.rs/winit/0.24.0/winit/platform/unix/struct.ARGBColor.html

chippers · 2021-04-23T19:37:46Z

I see an ARGB struct on winit docs for unix platforms, but nothing for colors on all platforms. I also don't see a way to set the window background color while looking through the docs, is that something that can even be provided by winit?

amrbashir · 2021-04-23T19:40:54Z

@wusyong implemented a WindowExtWindows and WindowExtUnix traits so we can add them there, not sure about macOs (don't know if it have an api for that) but I guess possible.

lemarier · 2021-04-23T21:12:11Z

In macOS to set webview transparent we could use something like;

let Color: id = msg_send![class!(NSColor), clearColor];
let () = msg_send![webview, setOpaque:NO];
let () = msg_send![webview, setBackgroundColor:Color];

We could write some helper for NSColor to use hex color by example so I don't see any issue for macOS.

wusyong · 2021-04-24T11:13:50Z

It's possible to set the background color on HTML already like this:
<body style="background-color:rgba(87,87,87,0.5);">hello</body>

lemarier · 2021-04-24T11:17:00Z

It's possible to set the background color on HTML already like this:
<body style="background-color:rgba(87,87,87,0.5);">hello</body>

I think it still flash as the webview has a default background color before the CSS is interpreted.

wusyong · 2021-04-24T11:24:22Z

Maybe it won't if we set transparent to the window and webview.
Btw I just realize we haven't updated transparent option on Windows.
Stable release of webview2 have DefaultBackgroundColor for us to do it.

amrbashir · 2021-04-24T11:38:23Z

Maybe it won't if we set transparent to the window and webview.

This is kinda scary, having the window transparent all the time, can have some side effects.
Check the second video in this tauri-apps/tauri#1564 and I remember electron also had unwanted behaviors when transparent option was on, we don't want to force it on users.

However we can set the webview to always be transparent and provide users with a method to change the window background.

chippers · 2021-04-24T15:38:51Z

It's possible to set the background color on HTML already like this:
<body style="background-color:rgba(87,87,87,0.5);">hello</body>

This doesn't work because there's 3 color stages

OS window color (I don't think there's a cross platform way of setting this)
Webview background color (nothing has loaded yet)
- Webview2: DefaultBackgroundColor
- macOS: Allow setting the browser's background color during attributes #197 (comment)
- webkit2gtk: WebViewExt::set_background_color(&self, rgba: &RGBA)
html page background color

see my video on tauri-apps/tauri#1564 (comment) to see all 3. I think we can get 2 and 3 working fine enough, I'm not sure of a cross platform way of doing 1.

The red flash will still happen with <body style="background-color:rgba(87,87,87,0.5);">hello</body> because there is still the step 2. My video used the api example, which has the spreadsheet in <head>. The red flash is slightly longer than inline body style because it waits to finish loading the stylesheet before the first painting, but they both still have them.

amrbashir · 2021-04-24T15:59:40Z

OS window can be styled too:

Windows: we can respond to WM_ERASEBKGND and paint the background.
Linux-GTK: we can provide a custom css and use CssProvider
MacOS: seems possible but I am not familiar with the api

keiya01 · 2022-06-14T13:23:12Z

Could I take on this issue?
And is there a point to take care ?

wusyong · 2022-06-17T04:53:18Z

Hmm this one is old. My stand is still we can make window and webview transparent and that's enough. People can always decide color on their html page

keiya01 · 2022-06-17T05:07:11Z

I see. That's true.

amrbashir · 2022-06-17T11:40:22Z

This is a nice to have feature and the code we use for transparent, can be slightly modified to also offer a way to set the color of the webview background so I don't see why wouldn't we offer this API also.

FabianLars · 2022-06-17T11:50:31Z

I think this could also help with the white flashes when resizing, so that resizing the WebView doesn't look as laggy as it is.

Sid911 · 2022-06-17T18:27:36Z

I just found the thread looking for answers to see if there is a setting to be changed for background color for webview or window.

Just as a note : for resize flashes color to the body itself is fine enough other than for the weirdness below

It would be awesome if this could be implemented, and released later on.
Also, sorry for hijacking the thread. Is this bug known during resize? The image below is a frame between resize (I am on debug build, I haven't testing in release). I am trying to reduce visual anomalies.

amrbashir · 2022-06-17T19:05:54Z

@Sid911 please open another issue for this or ask in our discord.

Silvea12 · 2022-07-15T22:16:55Z

I don't know if this is even possible to do, but I found Chromium's solution here:
https://codereview.chromium.org/296003010

When the window is resized, some drivers clobber the back buffer.
Unfortunately that can happen in the middle of a frame, and so we lose part
of what we've drawn and don't know it until we swapped (resulting in
flashes).

So instead, we create a child window, with a CopyFromParent visual (to avoid
inducing extra blits in the driver), that we can resize exactly in Resize(),
correctly ordered with GL, so that the buffer clobber is at the beginning of the
frame, before we will draw anything to it.

Actual patch: https://codereview.chromium.org/296003010/patch/1/10001

Gist of the patch: create a second window using the CopyFromParent flag and using that for the draw context. When it comes to resizing, you sync on GL, then perform the resize, and then sync on X.

It was brought up that this may not fix Wayland, but I was unable to reproduce the flicker they were describing on wayland (though I was using pixmap through xorg, so the issue may not have presented itself as a result).

Whether this is even possible to do - whether in wry or tao - I have no idea. But worth documenting regardless.

See https://discord.com/channels/616186924390023171/997615505223450624 for prior discussion on this.

tauri-apps/wry#197

chippers mentioned this issue Apr 23, 2021

Allow changing the webview background color tauri-apps/tauri#1564

Open

wusyong added type: feature request platform: All labels Apr 26, 2021

amrbashir added platform: All platform: Linux platform: macOS platform: Windows and removed platform: All labels Aug 30, 2021

amrbashir added a commit that referenced this issue Sep 3, 2022

feat: allow setting webview bg color, closes #197

8b48aaa

amrbashir closed this as completed in eb1b723 Sep 5, 2022

github-actions bot mentioned this issue Sep 5, 2022

Publish New Versions #662

Merged

Redstonerayy added a commit to redstonerayyy/devio that referenced this issue Jan 19, 2023

tauri working, but window resize flicker. set backgroun color?

e2a595f

tauri-apps/wry#197

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Allow setting the browser's background color during attributes #197

Allow setting the browser's background color during attributes #197

chippers commented Apr 23, 2021 •

edited

lucasfernog commented Apr 23, 2021

amrbashir commented Apr 23, 2021 •

edited

chippers commented Apr 23, 2021

amrbashir commented Apr 23, 2021 •

edited

lemarier commented Apr 23, 2021 •

edited

wusyong commented Apr 24, 2021

lemarier commented Apr 24, 2021

wusyong commented Apr 24, 2021

amrbashir commented Apr 24, 2021

chippers commented Apr 24, 2021

amrbashir commented Apr 24, 2021 •

edited

keiya01 commented Jun 14, 2022

wusyong commented Jun 17, 2022

keiya01 commented Jun 17, 2022

amrbashir commented Jun 17, 2022

FabianLars commented Jun 17, 2022

Sid911 commented Jun 17, 2022 •

edited

amrbashir commented Jun 17, 2022

Silvea12 commented Jul 15, 2022 •

edited

Allow setting the browser's background color during attributes #197

Allow setting the browser's background color during attributes #197

Comments

chippers commented Apr 23, 2021 • edited

lucasfernog commented Apr 23, 2021

amrbashir commented Apr 23, 2021 • edited

chippers commented Apr 23, 2021

amrbashir commented Apr 23, 2021 • edited

lemarier commented Apr 23, 2021 • edited

wusyong commented Apr 24, 2021

lemarier commented Apr 24, 2021

wusyong commented Apr 24, 2021

amrbashir commented Apr 24, 2021

chippers commented Apr 24, 2021

amrbashir commented Apr 24, 2021 • edited

keiya01 commented Jun 14, 2022

wusyong commented Jun 17, 2022

keiya01 commented Jun 17, 2022

amrbashir commented Jun 17, 2022

FabianLars commented Jun 17, 2022

Sid911 commented Jun 17, 2022 • edited

amrbashir commented Jun 17, 2022

Silvea12 commented Jul 15, 2022 • edited

chippers commented Apr 23, 2021 •

edited

amrbashir commented Apr 23, 2021 •

edited

amrbashir commented Apr 23, 2021 •

edited

lemarier commented Apr 23, 2021 •

edited

amrbashir commented Apr 24, 2021 •

edited

Sid911 commented Jun 17, 2022 •

edited

Silvea12 commented Jul 15, 2022 •

edited