Sidebar is transparent on mobile

[ghost]

Describe the bug
The sidebar appears too clear on mobile (tested with both Firefox and Safari on iOS), which makes it illegible. See screenshots.
I have found it hard to debug sine this doesn't affect my Desktop Firefox when using the "Responsive Design Mode" in the FF developer tools...

Screenshots
Firefox iOS:

Safari iOS:

Firefox desktop in responsive mode:

User Info (please complete the following information):

• OS: iOS
• Browser: Safari + Firefox
• Version: Latest

[jockebq]

Having the same issue! Is there any fix?

[ghost]

I haven't tried myself yet but I might look into it.

[ghost]

I had a look with the Safari remote debugger. I don't fully understand what's going on but basically:

.sidebar, .sidebar-head, .user-bg, div[id^=request]:not(#request-input-div) .dropdown-toggle {
    -webkit-backdrop-filter: blur(30px);
    backdrop-filter: blur(30px)
}

• This section is properly showing up as the computed style of the .sidebar (backdrop-filter is not supported but -webkit-backdrop-filter is applied).
• However Safari behaves exactly as if this rule did not exist. Deactivating it in the inspector doesn't change the display.
• But inexplicably, reapplying the rule in the inspector causes the blurred background image to properly show up

So it looks more like a Safari bug than a CSS bug...

That being said, it doesn't mean there aren't any fixes, but right now they're a bit beyond my skills.
I suspect there might be a way to activate the fallback to the section under @supports not (backdrop-filter: blur(30px)) to apply the fallback style that uses a background image instead of blur()...

[ghost]

Anyway until we can find a real fix, for now my workaround is to define in Organizr's "Custom CSS" section the following:

@media screen and (max-width:767px) {
    .sidebar {
        background: url(https://raw.githubusercontent.com/Burry/organizr-v2-plex-theme/master/images/background/noise.png) center center fixed, url(https://raw.githubusercontent.com/Burry/organizr-v2-plex-theme/master/images/background/blur-light.png) center center / cover no-repeat fixed !important
    }
}

[Burry]

@yannouchou Thanks for investigating. Seems like it's an experimental feature that needs some love from the WebKit and Blink teams, but it works well enough on desktop Safari. Released a temporary fix in Version 3 that uses the fallback style with no transparency on mobile.

[ghost]

Thanks @Burry
I kind of suspect that the blur works but is computed before the sidebar slides open, hence when it's over nothingness... which would explain why toggling the rule off/on while the sidebar is opened would fix the issue. But that's just speculation. Anyway, thanks for the fix, I think it's a very reasonable workaround!

[ghost]

Any idea how to make Organizr see and install the latest version?

[Burry]

@causefx will need to approve the PR, but if you want to manually update, you can replace the old Plex.css in Organizr's Dashboard/css/themes/ with the new one.

[causefx]

Merged! :)

[ghost]

Hmmm, doesn't seem to fix it for me...
Actually, I even lost the background grain effect from the main page:

@Burry having a quick look at your fix, didn't you mean @media screen and (max-width: 768px) instead of @media screen and (min-width: 768px) ?

[Burry]

🤦‍♂️ Yep it should be max-width instead, will fix when I get home. Though it looks like your phone is still loading the old stylesheet: it was pretty “sticky” for me too even after clearing site data so was hard to test, but here’s what it currently looks like on iOS 13: