WebOS - No blur effect on backdrop images

[retroNUC]

Describe The Bug Background blur not working on Jellyfin WebOS (LG TV) client. TV Mode viewed via standard desktop browser works, so must be something to do with browser support/compatibility on WebOS.

To Reproduce https://github.com/jellyfin/jellyfin-webos and the following server CSS:

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/jf_font.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/base.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/accentlist.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/rounding.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/smallercast.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/episodelist/episodes_compactlist.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent-dashboard.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/login/login_minimalistic.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fields/fields_noborder.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/cornerindicator/indicator_corner.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/type/dark.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_banner.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/bottombarprogress.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/hoverglow.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/glassy.css');

/* backdrop intensity tweaks */
.backdropImage {filter: blur(40px) saturate(120%) contrast(120%) brightness(40%);}

Screenshots

[retroNUC]

On investigation of user-agent, WebOS browser is reporting as Chrome 38.

Checking CSS compatibility, substituting filter for -webkit-filter in the custon tweak line fixes the issue, but tanks the performance.

[retroNUC]

And good news with some more Google-fu - Forcing hardware acceleration on the element fixes the performance issues. I suppose it's up to you on whether you want to implement any changes on the CSS side, or just leave this be.

/* backdrop intensity tweaks */
.backdropImage {-webkit-transform: translate3d(0, 0, 0);
-webkit-filter: blur(40px) saturate(120%) contrast(120%) brightness(40%);}

[tamburra]

!important tag on the blur fixed it for me.

[CillySu]

Similarly, !important fixed it for me.

[gibahjoe]

Apart from the css, are there any other conditions for showing backdrops, i just copied your css with the modification but i cant get a backdrop on any of my clients. Its driving me crazy

[CillySu]

There are some checkboxes in the settings you have to tick to enable backdrops, I forget where they are but I think it's in dashboard -> display

On Thu 12 Jan 2023, 07:03 gibahjoe, @.***> wrote:

Apart from the css, are there any other conditions for showing backdrops, i just copied yours with the modification but i cant get a backdrop on any of my clients. Its driving me crazy

— Reply to this email directly, view it on GitHub https://github.com/CTalvio/Ultrachromic/issues/49#issuecomment-1379895057, or unsubscribe https://github.com/notifications/unsubscribe-auth/ARRPVSH3DYRHIIXPLUDMICDWR6UDBANCNFSM53YUNQNQ . You are receiving this because you commented.Message ID: @.***>

[gibahjoe]

Thanks a lot. It worked. I have set the backdrop to display on the client and it shows now.

[Chevindu]

There are some checkboxes in the settings you have to tick to enable backdrops, I forget where they are but I think it's in dashboard -> display

All this time, I was thinking this was not working for me due to some browser support limitation. Thanks to you, backdrops are now showing for me in both Firefox and Chrome! I'd appreciate if this quirk was mentioned in the ReadMe, but no worries. (Maybe it's already mentioned there and I have missed it, in which case apologies)

[alexboutros]

Anyone know if there's a fix to get the backdrops showing on the title pages on apple devices? On iOS at least there's only the banner image, and it's not blurred. All the rest of the style changes appear to have applied.

Also thought I'd drop this here: https://github.com/BobHasNoSoul/jellyfin-mods#force-backdrops-for-all-users-108x

Allows you to force backdrops on for all users.