Only some elements work with blur on some devices

darkpixlz · April 4, 2023, 6:12pm

Hello,

As of recently, I’ve started to have issues with blurring things on Chrome and Mobile.
For example on mobile, the background and topbar are not blurred. However, random dropdowns are.

The same goes for some desktop browsers. On Chrome, the user menu and dropdown sidebar are now blurred. However, everything else is.

Here, I set the backdrop for all devices, which as I said does not work on mobile.

github.com

darkpixlz/DarkPixlz-s-Modern-Theme/blob/master/common/common.scss#L30


      
            /* Make the body a bit lighter */
            font-family: "Nunito" !important;
          }
          
          
div#main-outlet.wrap.not-found-container,
          #main-outlet-wrapper {
          
          
  #main-outlet,
            .sidebar-wrapper {
              @if $Is_Background_Blurred =="true" {
                backdrop-filter: blur(3rem) !important;
                background-color: #0a0a0aa6 !important;
          
          
      input[type],
                .select-kit.combo-box .select-kit-header,
                .d-editor-textarea-wrapper,
                div.ac-wrap {
                  background: transparent;
                }
              }

The menu panel is done here:

github.com

darkpixlz/DarkPixlz-s-Modern-Theme/blob/master/common/common.scss#L1073


      
          .d-editor-textarea-wrapper.disabled,
          .d-editor-textarea-wrapper,
          #reply-control .mini-tag-chooser .select-kit-header,
          #reply-control .category-input .category-chooser,
          #reply-control #reply-title {
            background: transparent;
            backdrop-filter: blur(2rem);
            -webkit-backdrop-filter: blur(2rem);
          }
          
          
.menu-panel.drop-down {
            background-color: rgba(0, 15, 255, 0);
            backdrop-filter: blur(2rem);
            -webkit-backdrop-filter: blur(2rem);
          }
          
          
#reply-control .mini-tag-chooser .select-kit-header {
            background: transparent;
            border-radius: 8px;
          }

I’m not sure what I’ve done wrong here, as in the screenshots it only works on some elements on mobile, and on desktop it only doesn’t support that one thing on Chromium in specific - having no issues on Firefox.

Update: It seems like blurring the header causes this, but as I said only on Chromium again.

Update 2: I forgot to add webkit to the background - could that be causing it?

Topic		Replies	Views
Issue with blurring elements Dev	16	1209	August 8, 2022
The theme selector can't be scrolled when sections are collapsed Bug sidebar-theme-toggle	5	167	July 18, 2023
Breadcrumb nav style; less button more input? UX	11	1637	October 2, 2018
Mobile Brand Header button background colour not right? Dev css , brand-header	5	29	January 3, 2021
Blurry Emojis on Chrome Support	5	978	April 14, 2022

Only some elements work with blur on some devices

Related topics