Theme does not work as intended only on tablet.

[realFPS]

Describe the bug The theme is buggy on tablet even though it works perfectly fine on PC

To Reproduce /* Import Statements */ @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.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_grid.css'); @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/header/header_transparent.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_border.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_withaccent.css'); @import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple-logo.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://ctalvio.github.io/Monochromic/backdrop-hack_style.css'); @import url("https://cdn.jsdelivr.net/gh/prayag17/Jellyfin-Icons/round.css");

/Hide original title on item details page/ h4.itemName.originalTitle { display: none; }

/Hide Sync Button/ .headerSyncButton { display: none; }

/Hide top bar on item details page/ .skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred, .skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader { background: none; background-color: rgba(0, 0, 0, 0); }

/Style backdrop/ .backdropImage { filter: blur(10px) saturate(120%) contrast(120%) brightness(40%); }

/Hide Backdrops on irrelevant pages/ body.withSectionTabs div.backdropContainer { display: none; }

/Login background/ #loginPage { background: url(https://i.imgur.com/9vL4iNf.png) !important; }

:root { --accent: 80, 130, 208; --rounding: 8px; }

/Hide Show Title on Seasons Page/ .parentName { display: none !important; }

Screenshots

Windows PC	Tab S9 Plus

[booze87]

Same here - I found out that removing

@import url('https://ctalvio.github.io/Monochromic/backdrop-hack_style.css');

helps.

[realFPS]

That does not solve the issue for me. @CTalvio Can you please look into this? It's just the item details page that has this problem.

Currently I am using

@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/fixes.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/header/header_transparent.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_border.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_withaccent.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/titlepage/title_simple-logo.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/bottombarprogress.css');
@import url('https://cdn.jsdelivr.net/gh/CTalvio/Ultrachromic/effects/hoverglow.css');

.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred {
  background: none;
  background-color: rgba(0, 0, 0, 0);
}
.skinHeader.focuscontainer-x.skinHeader-withBackground.skinHeader-blurred.noHomeButtonHeader {
  background: none;
  background-color: rgba(0, 0, 0, 0);
}

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

/*Login background*/
#loginPage {background: url(https://i.imgur.com/9vL4iNf.png) !important;}

/*Accent and roundingd*/
:root {--accent: 98, 121, 205;}
:root {--rounding: 10px;}

[Kh3nsu]

I can confirm this issue. Same Problem here with my IPad Pro 2018.

Edit: Removing the backdrop-hack-style fixed it for me on the IPad.