SOLVED: UI bugged on Chrome

[Sash]

Hi, I'm having this issue particularly with Chrome. The UI is fine on Jellyfin Media Player, and other browsers. 

I'm using this theme and Custom CSS code. When I remove the code My media " Collections, Movies, TV Shows, Music, Live TV" gets centered but there's still that box that appears around the Featured Content Bar. I reinstalled Chrome multiple times, cleared the cache, reset the settings, made sure that any extenstions are not causing conflicts, and also reset the chrome flags multiple times. 

CSS Code That I'm using

Code:

@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finality@main/Finality-Coloured.css");
@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finality@main/slideshow.css");
@import url("https://cdn.jsdelivr.net/gh/tedhinklater/finality@main/scrolling%20backdrop.css");
@media only screen and (max-device-width: 767px) {.featurediframe {height: 16vh !important;}}

/*pan the background for backdrops*/
@keyframes backgroundScroll {
0% { background-position: 99% 1%; opacity:0;}
33% { background-position: 50% 50%;opacity:1;}
40% { background-position: 99% 99%; opacity:0;}
66% { background-position: 50% 50%; }
75% { background-position: 1% 1%; }
100% { background-position: 50% 50%; }}
.backdropImage {background-size: 150% 150%;  opacity:0 ;background-position: 99% 1%; animation: backgroundScroll 60s ease-in-out 1s;}

@keyframes backgroundScrollmob {
0% { background-position: 99% 1%; opacity:0;}
33% { background-position: 50% 50%;opacity:1;}
40% { background-position: 1% 99%; opacity:0}
66% { background-position: 99% 50%; }
75% { background-position: 99%% 99%; }
100% { background-position: 50% 50%; }}
@media (max-width: 600px) {
  .backdropImage {background-size: 150% 150% cover; opacity:0 ; background-position: 99% 1%; animation: backgroundScrollmob 60s ease-in-out 1s;}
}

/*thanks poiaman for the fix for mobile devices bellow*/
@Keyframes backgroundScroll {
0% { background-position: 99% 1%; opacity: 0; filter: blur(0px); }
5% { opacity: 1; filter: blur(0px); }
33% { background-position: 50% 50%; opacity: 1; filter: blur(0px); }
40% { background-position: 99% 99%; opacity: 0; filter: blur(0px); }
66% { background-position: 50% 50%; filter: blur(0px); }
75% { background-position: 1% 1%; filter: blur(0px); }
100% { background-position: 50% 50%; opacity: 0.5; filter: blur(5px); }
}

.backdropImage {
background-size: cover;
opacity: 0;
background-position: center center;
animation: backgroundScroll 60s ease-in-out 0s;
filter: blur(0px);
}

@Keyframes backgroundScrollmob {
0% { background-position: 99% 1%; opacity: 0; filter: blur(0px); }
5% { opacity: 1; filter: blur(0px); }
33% { background-position: 50% 50%; opacity: 1; filter: blur(0px); }
40% { background-position: 1% 99%; opacity: 0; filter: blur(0px); }
66% { background-position: 99% 50%; filter: blur(0px); }
75% { background-position: 99% 99%; filter: blur(0px); }
100% { background-position: 50% 50%; opacity: 0.5; filter: blur(5px); }
}

@media (max-width: 600px) {
.backdropImage {
background-size: cover;
opacity: 0;
background-position: center center;
animation: backgroundScrollmob 60s ease-in-out 0s;
filter: blur(0px);
}
}

/*Custom login page of awesome*/

#loginPage {

  background-image: url('/Branding/Splashscreen?format=jpg&foregroundLayer=20.0');
  background-position: top left;
  background-size: 200%;
  background-attachment: fixed;
  animation: backgroundAnimation 150s infinite alternate;
  z-index: 2;
}

@keyframes backgroundAnimation {
  0% {
    background-position: top left;
  }
  25% {
    background-position: bottom right;
  }
  50% {
    background-position: bottom left;
  }
  100% {
    background-position: top left;
  }
}

.skinHeader.semiTransparent.noHeaderRight {
  background: transparent !important;
}

div#loginPage {
  margin-top: 0 !important;
  overflow: hidden scroll;
}

#loginPage h1::after {
  content: "Sign In";
  font-size: 32px;
}

#loginPage h1 {
  font-weight: 700;
  font-size: 0;
  margin-bottom: 21.44px;
  margin-top: 32px !important;
  text-align: left;
}

.inputContainer {
  margin-bottom: 1.8em;
  margin-top: 1.8em;
}

#loginPage .padded-left.padded-right.padded-bottom-page {
    background: #000000bf;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    margin: 21px;
    position: absolute;
    border-radius: 10px;
    width: 100vw;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;
    padding: 3em !important;
}

#loginPage .readOnlyContent {
  padding: 0 !important;
  width: 100% !important;
  height: -webkit-fit-content;
  height: -moz-fit-content;
  height: fit-content;
}

.manualLoginForm {
  height: 100%;
  width: 100%;
}

#loginPage .inputContainer {
  background: #333;
  border-radius: var(--rounding);
  height: 4em;
  position: relative;
}

#loginPage .inputLabel.inputLabelFocused,
#loginPage .inputLabel:not(.inputLabel-float) {
  font-size: 0.8em;
  left: 4%;
  top: 4%;
  transform: none;
}

.visualLoginForm {
  width: 100%;
  position: relative;
  overflow: hidden;
}

#divUsers {
  flex-flow: revert;
  overflow: scroll visible;
  justify-content: flex-start;
}

#loginPage .emby-input {
  height: 100%;
  border: none;
  background: transparent !important;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none !important;
  padding: 4% !important;
  font-size: 1.1em;
  border: none !important;
}

#loginPage .inputLabel {
  position: absolute;
  top: 50%;
  left: 4%;
  transform: translateY(-50%);
  font-size: 1.5em;
  font-weight: 300;
  transition: 0.2s ease;
  color: #8c8c8c;
}

#loginPage .inputContainer:focus,
#loginPage .inputContainer:focus-within {
  background: #454545;
}

Google Chrome. Firefox:



JMF & MS Edge:

[Sash]

It looks like the dev of the theme and addons have made changes to the repo that made these changes. I have linked this thread to the dev. Hopefully, he will provide a solution.

[Ted Hinklater]

Ended up being Sash with the solution Cheers man