Floating Webview CSS Not Rendering Correctly When Not in Focus

Bugs or Unexpected Behavior
1

Hi all,

I use a floating web view to display a locally hosted percentage calculator made with HTML, CSS, Vanilla JS.

I recently updated the design to somewhat mimic Apple's liquid glass and I'm finding that the background blur rendering does not work correctly if the web view loses focus for even a couple of seconds (i.e. my mouse isn't inside the container moving, or none of the fields are focused).

I took screenshots to show the issue, but interestingly, when I screenshot the incorrectly rendered web view, it looks fine in the screenshot. I tried to add a recording but it doesn't seem to let me post with a video, so third time lucky, I'm uploading screenshots from a recording:

[NOTE: MY TOPICS AREN'T WORKING WITH CODE/SCREENSHOTS SO I WILL UPLOAD TO A COMMENT ON THIS POST]

Device/software info:

  • BTT version 6.663
  • MacOS 27.0
  • M4 Mac mini

Worth mentioning as well that I've checked my config (under 'actions executed' > Config/Advanced), and options that stand out here are:

  • "Do NOT keep content active in background" - which has always been unchecked
  • "Do NOT Autofocus Webview" - unchecked

I can't find anything else relevant.

It's a minor bug that I can live with, and I wouldn't be upset if you didn't fix it, maybe it's the intended behaviour to save RAM, I'm not sure.

Thanks!

2

Here's a screen recording of the behaviour:

3

And here's the CSS I'm using for the main affected element:

.container {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 32px;
    background-color: rgba(0, 0, 0, 0.30);
    box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.15);
    backdrop-filter: blur(7px);
    padding: 20px;
    padding-bottom: 0;
}

.container::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px; /* border thickness */
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.4) 0%, rgba(153, 153, 153, 0.4) 50%, rgba(255, 255, 255, 0.4) 100%);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
}
4

The site doesn't seem to like me using CSS code in comments/topics. If you want to see the code I'm using I'll find another way to send.

It's mainly background-color, box-shadow, backdrop-filter doing the blurring and transparency

5

The system webviews do this to save resources. There are workarounds though: Realtime Backdrop effects in Floating Webview - #4 by yw4z