CSS how to "fix" picture-elements = no scrolling?

Hi everyone,

I can’t seem to find a way to completely lock (fixed) the page (so there is no page scrolling)
(I’m not talking about the background image).

I’m using Picture-Elements card to customise my view but it still tends to scroll the page slightly when using touch on a tablet, which is quite frustrating when trying to adjust volume sliders etc…

I’m not a pro with CSS but after using CHROME to inspect the webpage and after a lot of fiddling I found what needs to be changed - I think - but I don’t know how to make this happen? Is there a way card-mod could do this or perhaps a custom CSS?

Below is the extact from the “elements” inspection.
If I change #contentContainer { position: relative to position: fixed it works…

:host {
  display: block;
        
        position: relative;
        z-index: 0;
}

:host ::slotted([slot=drawer]) {
  z-index: 1;
}

:host([fullbleed]) {
  position: var(--layout-fit_-_position); top: var(--layout-fit_-_top); right: var(--layout-fit_-_right); bottom: var(--layout-fit_-_bottom); left: var(--layout-fit_-_left);
}

#contentContainer {
  position: relative;   #<-- IF I CHANGE THIS TO FIXED IT WORKS
        z-index: 0;
        height: 100%;
        transition: var(--app-drawer-layout-content-transition, none);
}

#contentContainer[drawer-position=left] {
  margin-left: var(--app-drawer-width, 256px);
}

#contentContainer[drawer-position=right] {
  margin-right: var(--app-drawer-width, 256px);
}


I’ve seen a many people (ones using tablets) try and solve this without any luck.

I appreciate any support.

Thanks in advance

No idea, sorry.

Also please see point 16 here.