Stack in Cards flash on first load

I’m trying to create a nicer dashboard with stack in cards and cardmod.
The first time the page loads in a browser the cards all seem to “flash” into place.
Is this normal behavior or am i doing something wrong?

In the gif below you can see what i mean.

HA - Problem with Cardmod or StackInCard

Below you can see the code i use for the card and also the theme i’m using. (Not sure if the theme has anything to do with it?!?) This card is put together with code i found in forums and on youtube channels. I don’t have much experience with CSS.

I’m using the margin bit a lot just to get the buttons a bit closer together, otherwise all the elements take up too much space.

If there is a better way of achieving a similar result i’m all ears. But i would at least like to get rid of the flashing if possible.

Main reason i want to get rid of it is that i want to start using some as those cards as popup cards via browsermod, but everytime the popup shows up you have the same behavior. If it was just on the main screen i could live with it doing it once while loading.

Any help would be greatly appreciated

Stack in Card Code:

type: custom:stack-in-card
cards:
  - type: horizontal-stack
    cards:
      - type: custom:button-card
        name: Outside
        styles:
          name:
            - font-weight: bold
            - font-size: 30px
            - justify-self: start
            - color: silver
        tap_action:
          action: navigate
          navigation_path: /layout-card/buttontest
        card_mod:
          style: |
            ha-card
              {
               background: trannsparent;
               margin: 25px 0px 0px 20px;
              }
      - type: markdown
        content: |-
          <font size= 5px color= silver> <center><b>
          {{state_attr("weather.home_hourly","temperature")}}°C
          </center></b></font> </a>
        card_mod:
          style: |
            ha-card
              {margin: -10px 0px 0px 110px;}
  - type: grid
    columns: 6
    square: false
    cards:
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: ''
        card_mod:
          style: |
            ha-card
              {margin: -25px 0px 10px 0px;}
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: ''
        card_mod:
          style: |
            ha-card
              {margin: -25px 0px 10px 0px;}
      - type: custom:mushroom-light-card
        entity: light.porch_lights
        name: Porch
        secondary_info: none
        layout: vertical
        card_mod:
          style: |
            ha-card
              {margin: -25px 0px 10px 0px;}
      - type: custom:mushroom-light-card
        entity: light.downstairs_lights
        name: Downstairs
        secondary_info: none
        layout: vertical
        card_mod:
          style: |
            ha-card
              {margin: -25px -30px 10px 0px;}
  - type: custom:mushroom-chips-card
    chips:
      - type: entity
        entity: binary_sensor.downstairs_motion
        content_info: none
    alignment: center
    card_mod:
      style: |
        ha-card
          {margin: -5px 0px 10px 0px;}

Theme:

# iOS Dark Mode Theme - dark-blue

#

ios-dark-mode-dark-blue-alternative:

  # Global

  background-image: "center / cover no-repeat fixed url('/hacsfiles/themes/ios-themes/homekit-bg-dark-blue.jpg')"

  lovelace-background: var(--background-image)

  primary-color: "#ff9f09"  # from Apple systemOrange dark mode

  light-primary-color: "#B6B6C1"  # (icons on left menu) (light: systemGray5 from iOS dark mode, dark: XXX)

  primary-background-color: "#2c2c2e"  # systemGray5 dark mode

  secondary-background-color: rgba(25, 25, 25, 0.9)

  divider-color: rgba(152, 152, 157, 0.3)  # from Apple systemGray dark mode

  accent-color: rgba(255, 159, 9, 1)

  # Text

  primary-text-color: "#FFF"

  secondary-text-color: "#d3d3d3"

  text-primary-color: "#FFF"

  disabled-text-color: "#555"  # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2

  text-dark-color: "#FFF"

  # Sidebar Menu

  sidebar-background-color: var(--primary-background-color)

  sidebar-icon-color: var(--light-primary-color)

  sidebar-text-color: "#F1F1F1"

  sidebar-selected-background-color: var(--primary-background-color)

  sidebar-selected-icon-color: "#FFF"  # (light: systemGray5 from iOS light mode, dark: XXX)

  sidebar-selected-text-color: var(--sidebar-selected-icon-color)

  # States and Badges

  state-icon-color: "#FFF"

  state-icon-active-color: "#FFF"  # or make light icons yellow when active: rgba(255, 214, 10, 1)

  state-icon-unavailable-color: var(--disabled-text-color)

  paper-item-icon-active-color: "#FFF"  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/30

  # Sliders

  paper-slider-knob-color: "#FFFFFF"

  paper-slider-knob-start-color: var(--paper-slider-knob-color)

  paper-slider-pin-color: var(--paper-slider-knob-color)

  paper-slider-active-color: "#0984ff"  # from Apple systemBlue dark mode

  paper-slider-secondary-color: var(--paper-slider-knob-color)

  paper-slider-container-color: rgba(255, 255, 255, 0.5)

  paper-slider-font-color: "#000"

  ha-slider-background: none !important

  # Labels

  label-badge-background-color: "#23232E"

  label-badge-text-color: "#F1F1F1"

  label-badge-red: rgba(255, 159, 9, 0.7)  # from Apple systemOrange dark mode

  # Cards

  card-background-color: var(--secondary-background-color)  # Unused entities table background

  paper-listbox-background-color: var(--primary-background-color)

  ha-card-border-radius: 20px

  ha-card-background: rgba(10, 10, 10, 0.4)

  paper-card-background-color: var(--ha-card-background)

  ha-card-border-width: 0  # https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/82#event-7732695357

  # Toggles

  paper-toggle-button-checked-button-color: "#484848"

  paper-toggle-button-checked-bar-color: "#484848"

  paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)

  paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)

  # Table row

  table-row-background-color: var(--primary-background-color)

  table-row-alternative-background-color: var(--secondary-background-color)

  # Switches

  switch-checked-color: "#30d257"  # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA

  switch-checked-track-color: "#30d158"  # from Apple systemGreen dark mode

  switch-checked-button-color: "#FFF"

  # Other

  paper-dialog-background-color: rgba(55, 55, 55, 0.8)  # e.g., background of more-info

  paper-item-icon-color: white  # also should mini-media-player icon white (but doesn't work by itself)

  more-info-header-background: rgba(25, 25, 25, 0.5)

  lumo-body-text-color: var(--primary-text-color)  # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42

  app-header-background-color: rgba(48, 69, 124, 0.4)

  markdown-code-background-color: "#464646"

  code-editor-background-color: "#161616"

  # Custom

  mcg-title-letter-spacing: .15em

  mini-media-player-base-color: white

  mini-media-player-icon-color: white

  # Added for https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72

  # TODO: add description for lines below. Suggested in https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/72

  input-ink-color: var(--primary-text-color)

  input-fill-color: transparent

  input-disabled-fill-color: transparent

  input-label-ink-color: var(--primary-text-color)

  input-disabled-ink-color: var(--disabled-text-color)

  input-dropdown-icon-color: var(--primary-text-color)

  input-idle-line-color: var(--secondary-text-color)

  input-hover-line-color: var(--secondary-text-color)

  codemirror-property: var(--accent-color)

  #browser_mod.popup

  #dialog-backdrop-filter: blur(2em) brightness(0.75)

  popup-background-color: rgba(34,38,39,0.9)

  popup-border-width: 1px

  popup-border-radius: 1em

  tablet-popup-header-color: rgba(200, 218, 222, 0.05)

  tablet-popup-content-padding: 1.4em 2.2em 1.6em 1.5em

  tablet-popup-button-padding: 0.1em 2em 1.8em 2em

  tablet-popup-border-style: 1.5px solid rgba(0,0,0,0.2)

digging up this post to see if there is anything that changed, I see the same behavior and that is especially annoying using it on a mobile device as the cards re-load every time I open the a App

Did you find any solution? I also facing same issue.