Fix elements below scrollbar in Safari (#16037)

src/components/ha-drawer.ts

@@ -32,6 +32,9 @@ export class HaDrawer extends DrawerBase {
       .mdc-drawer.mdc-drawer--modal.mdc-drawer--open {
         z-index: 200;
       }
+      .mdc-drawer-app-content {
+        transform: translateZ(0);
+      }
     `,
   ];
 }

src/components/ha-top-app-bar-fixed.ts

@@ -1,19 +1,43 @@
 import { TopAppBarFixedBase } from "@material/mwc-top-app-bar-fixed/mwc-top-app-bar-fixed-base";
 import { styles } from "@material/mwc-top-app-bar/mwc-top-app-bar.css";
 import { css } from "lit";
-import { customElement } from "lit/decorators";
+import { customElement, property } from "lit/decorators";
+
+let drawerContent: HTMLElement | undefined;
 
 @customElement("ha-top-app-bar-fixed")
 export class HaTopAppBarFixed extends TopAppBarFixedBase {
+  private get _drawerContent() {
+    if (!drawerContent) {
+      drawerContent = document
+        .querySelector("home-assistant")!
+        .renderRoot.querySelector("home-assistant-main")!
+        .renderRoot.querySelector("ha-drawer")!
+        .renderRoot.querySelector(".mdc-drawer-app-content") as HTMLElement;
+    }
+    return drawerContent;
+  }
+
+  @property({ type: Object })
+  get scrollTarget() {
+    return this._scrollTarget || this._drawerContent || window;
+  }
+
+  protected updateRootPosition() {}
+
   static override styles = [
     styles,
     css`
+      .mdc-top-app-bar {
+        position: sticky;
+        top: 0;
+      }
       .mdc-top-app-bar__row {
         height: var(--header-height);
         border-bottom: var(--app-header-border-bottom);
       }
       .mdc-top-app-bar--fixed-adjust {
-        padding-top: var(--header-height);
+        padding-top: 0;
       }
       .mdc-top-app-bar {
         --mdc-typography-headline6-font-weight: 400;

src/layouts/home-assistant-main.ts

@@ -174,7 +174,6 @@ export class HomeAssistantMain extends LitElement {
         /* remove the grey tap highlights in iOS on the fullscreen touch targets */
         -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
         --mdc-drawer-width: 56px;
-        --mdc-top-app-bar-width: calc(100% - var(--mdc-drawer-width));
       }
       :host([expanded]) {
         --mdc-drawer-width: calc(256px + env(safe-area-inset-left));

src/panels/lovelace/hui-root.ts

@@ -961,12 +961,17 @@ class HUIRoot extends LitElement {
           position: fixed;
           top: 0;
           width: var(--mdc-top-app-bar-width, 100%);
-          z-index: 2;
-          transition: box-shadow 0.3s ease-out;
           padding-top: env(safe-area-inset-top);
+          z-index: 4;
+          transition: box-shadow 200ms linear;
         }
         :host([scrolled]) .header {
-          box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.75);
+          box-shadow: var(
+            --mdc-top-app-bar-fixed-box-shadow,
+            0px 2px 4px -1px rgba(0, 0, 0, 0.2),
+            0px 4px 5px 0px rgba(0, 0, 0, 0.14),
+            0px 1px 10px 0px rgba(0, 0, 0, 0.12)
+          );
         }
         .edit-mode .header {
           background-color: var(--app-header-edit-background-color, #455a64);
@@ -1054,6 +1059,7 @@ class HUIRoot extends LitElement {
             var(--primary-background-color)
           );
           overflow: auto;
+          transform: translateZ(0);
         }
         /**
          * In edit mode we have the tab bar on a new line *

src/panels/profile/ha-change-password-card.ts

@@ -33,78 +33,72 @@ class HaChangePasswordCard extends LitElement {
 
   protected render(): TemplateResult {
     return html`
-      <div>
-        <ha-card
-          .header=${this.hass.localize(
-            "ui.panel.profile.change_password.header"
-          )}
-        >
-          <div class="card-content">
-            ${this._errorMsg
-              ? html`<ha-alert alert-type="error">${this._errorMsg}</ha-alert>`
-              : ""}
-            ${this._statusMsg
-              ? html`<ha-alert alert-type="success"
-                  >${this._statusMsg}</ha-alert
-                >`
-              : ""}
+      <ha-card
+        .header=${this.hass.localize("ui.panel.profile.change_password.header")}
+      >
+        <div class="card-content">
+          ${this._errorMsg
+            ? html`<ha-alert alert-type="error">${this._errorMsg}</ha-alert>`
+            : ""}
+          ${this._statusMsg
+            ? html`<ha-alert alert-type="success">${this._statusMsg}</ha-alert>`
+            : ""}
 
-            <ha-textfield
-              id="currentPassword"
-              name="currentPassword"
-              .label=${this.hass.localize(
-                "ui.panel.profile.change_password.current_password"
-              )}
-              type="password"
-              autocomplete="current-password"
-              .value=${this._currentPassword}
-              @input=${this._currentPasswordChanged}
-              required
-            ></ha-textfield>
+          <ha-textfield
+            id="currentPassword"
+            name="currentPassword"
+            .label=${this.hass.localize(
+              "ui.panel.profile.change_password.current_password"
+            )}
+            type="password"
+            autocomplete="current-password"
+            .value=${this._currentPassword}
+            @input=${this._currentPasswordChanged}
+            required
+          ></ha-textfield>
 
-            ${this._currentPassword
-              ? html`<ha-textfield
-                    .label=${this.hass.localize(
-                      "ui.panel.profile.change_password.new_password"
-                    )}
-                    name="password"
-                    type="password"
-                    autocomplete="new-password"
-                    .value=${this._password}
-                    @change=${this._newPasswordChanged}
-                    required
-                    auto-validate
-                  ></ha-textfield>
-                  <ha-textfield
-                    .label=${this.hass.localize(
-                      "ui.panel.profile.change_password.confirm_new_password"
-                    )}
-                    name="passwordConfirm"
-                    type="password"
-                    autocomplete="new-password"
-                    .value=${this._passwordConfirm}
-                    @input=${this._newPasswordConfirmChanged}
-                    required
-                    auto-validate
-                  ></ha-textfield>`
-              : ""}
-          </div>
+          ${this._currentPassword
+            ? html`<ha-textfield
+                  .label=${this.hass.localize(
+                    "ui.panel.profile.change_password.new_password"
+                  )}
+                  name="password"
+                  type="password"
+                  autocomplete="new-password"
+                  .value=${this._password}
+                  @change=${this._newPasswordChanged}
+                  required
+                  auto-validate
+                ></ha-textfield>
+                <ha-textfield
+                  .label=${this.hass.localize(
+                    "ui.panel.profile.change_password.confirm_new_password"
+                  )}
+                  name="passwordConfirm"
+                  type="password"
+                  autocomplete="new-password"
+                  .value=${this._passwordConfirm}
+                  @input=${this._newPasswordConfirmChanged}
+                  required
+                  auto-validate
+                ></ha-textfield>`
+            : ""}
+        </div>
 
-          <div class="card-actions">
-            ${this._loading
-              ? html`<div>
-                  <ha-circular-progress active></ha-circular-progress>
-                </div>`
-              : html`<mwc-button
-                  @click=${this._changePassword}
-                  .disabled=${!this._passwordConfirm}
-                  >${this.hass.localize(
-                    "ui.panel.profile.change_password.submit"
-                  )}</mwc-button
-                >`}
-          </div>
-        </ha-card>
-      </div>
+        <div class="card-actions">
+          ${this._loading
+            ? html`<div>
+                <ha-circular-progress active></ha-circular-progress>
+              </div>`
+            : html`<mwc-button
+                @click=${this._changePassword}
+                .disabled=${!this._passwordConfirm}
+                >${this.hass.localize(
+                  "ui.panel.profile.change_password.submit"
+                )}</mwc-button
+              >`}
+        </div>
+      </ha-card>
     `;
   }
 

src/panels/profile/ha-panel-profile.ts

@@ -5,6 +5,7 @@ import { customElement, property, state } from "lit/decorators";
 import { fireEvent } from "../../common/dom/fire_event";
 import "../../components/ha-card";
 import "../../components/ha-menu-button";
+import "../../components/ha-top-app-bar-fixed";
 import { isExternal } from "../../data/external";
 import {
   CoreFrontendUserData,
@@ -30,7 +31,6 @@ import "./ha-push-notifications-row";
 import "./ha-refresh-tokens-card";
 import "./ha-set-suspend-row";
 import "./ha-set-vibrate-row";
-import "../../components/ha-top-app-bar-fixed";
 
 @customElement("ha-panel-profile")
 class HaPanelProfile extends LitElement {