Comments (11)
Merged! :)
from organizr-plex-theme.
Having the same issue! Is there any fix?
from organizr-plex-theme.
I haven't tried myself yet but I might look into it.
from organizr-plex-theme.
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()
...
from organizr-plex-theme.
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
}
}
from organizr-plex-theme.
@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.
from organizr-plex-theme.
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!
from organizr-plex-theme.
Any idea how to make Organizr see and install the latest version?
from organizr-plex-theme.
@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.
from organizr-plex-theme.
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)
?
from organizr-plex-theme.
🤦♂️ 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:
from organizr-plex-theme.
Related Issues (20)
- Collapse Ombi on Homepage when there is no content [Feature request] HOT 6
- Refresh button still not working in 2.7.0 HOT 3
- Needs some styling HOT 4
- Change Background HOT 2
- Logos in Login Screen Are Not Centered HOT 1
- Not installing on unraid dock HOT 2
- Still has some padding after editing js/custom.min.js HOT 5
- Looks like something changed HOT 1
- Horizontal bar not working correctly? HOT 1
- [Request] - Hide Left bar Button
- Custom CSS input box missing HOT 1
- Cannot change location of toast notification.
- Login page background image 404
- Plex Theme - bug with images containing "ombi" in the file name.
- Change color of corner indicator when Ombi Request has been approved HOT 1
- Icons in top right of email plugin broken
- Calendar Widget text not fixed
- Clicking on the refresh cover button seems to be broken HOT 8
- Blue backgrounds show up on elements in the splash screen and home page HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from organizr-plex-theme.