Sticky header see through on mobile?

Question

My goal is to make my sticky header work well on both mobile and desktop. Desktop seems to work perfectly for me but on mobile and I'm using an Android it seems to be jittery or see through. On IOS i couldn't see the issue, using a friends iPhone. But tested on a couple Samsung's.

I've tried to include everything that is needed, please let me know if you need anymore information. I do have a video of the issue on mobile as well if you'd like to see?

I've tried playing around with putting it in another div etc, its the configurator-header-holder, can't seem to find any issues, as it works for desktop so it must be something really small or something i'm missing. Happy for any ideas

.configurator-header-holder {
    position: sticky;
    z-index: 9999;
    box-shadow: 0 15px 35px rgb(50 50 53 / 20%), 0 5px 15px rgb(0 0 0 / 7%);
    margin-top: -1px;
    top: -1px;
}
.configurator-system-summary {
    background-color: #ebebeb;
    height: 70px;
    padding-left: 30px;
    padding-right: 30px;
    width: 100%;
    overflow: hidden;
}
@media (max-width: 480px)
.configurator-system-summary {
    height: 95px;
    padding: 0;
}
.configurator-system-summary-inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}
@media (max-width: 480px)
.configurator-system-summary-inner .fl {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
.configurator-system-summary-inner .fl {
    width: 100%;
}
.configurator .configurator-system-summary .fr, .configurator-system-summary .fl {
    height: 70px;
}
.vas {
    display: flex;
    align-items: center;
}
.fl {
    float: left;
}
.vas {
    display: flex;
    align-items: center;
}

<div class="configurator-header-holder">
<div style="background-color: black;">
  <h3 style="color:white; margin-bottom:15px; padding:15px; margin-top:0px; margin-bottom:0px;padding-left: 30px; font-size:16px; text-align:center;">INTEL SATURN ROBLOX GAMING PC </h3>
</div>
<div class="configurator-system-summary">
  <div class="configurator-system-summary-inner">
    <div class="fl vas">
      <p>System summary</p>
      <div class="price-holder">
      <p class="running_total_ex_holder">
        <span id="running_total_ex" class="price_td_green">£499.99</span><br>
      <span>ex. VAT</span></p>
      </div>
      <div class="price-holder">
      <p class="running_total_inc_holder">
        <span id="running_total_inc" class="price_td_green">£599.99</span><br>
      <span>inc. VAT</span></p>
      </div>
      <span id="fin_del1" style="display: none;"></span>
      <div class="price-holder price-finance-holder" id="price-holder" style="display: none;">
      <p><span id="running_finance" class="price_td_green"></span></p>
      </div>
      
      
    <div style="margin: 0 0 0 0"><klarna-placement data-key="credit-promotion-badge" data-purchase-amount="59999" data-preloaded="true" data-locale="en-GB" style="display: flex; justify-content: center;"><div style="height: auto; width: 100%; display: block;"></div><link rel="stylesheet" href="https://x.klarnacdn.net/ui/fonts/v1.3/fonts.css"></klarna-placement></div><div class="form-field-select-wrapper">
          <select id="product-quantity-select" class="form-field-input form-field-select form-field-filled" aria-label="Quantity" data-quantity-select="">
            
              <option selected="" value="1">
                1
              </option>
            
              <option value="2">
                2
              </option>
            
              <option value="3">
                3
              </option>
            
              <option value="4">
                4
              </option>
            
              <option value="5">
                5
              </option>
            
              <option value="6">
                6
              </option>
            
              <option value="7">
                7
              </option>
            
              <option value="8">
                8
              </option>
            
              <option value="9">
                9
              </option>
            
            <option value="10+">
              10+
            </option>
          </select>
          <label for="product-quantity-select" class="form-field-title">
            Quantity
          </label>
          <svg aria-hidden="true" focusable="false" role="presentation" width="8" height="6" viewBox="0 0 8 6" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-chevron-down">
<path class="icon-chevron-down-left" d="M4 4.5L7 1.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="square"></path>
<path class="icon-chevron-down-right" d="M4 4.5L1 1.5" stroke="currentColor" stroke-width="1.25" stroke-linecap="square"></path>
</svg>

        </div><button class="mws-addtocart product-form--atc-button mw-apo-add-to-cart-cloned mdc-ripple-surface mdc-ripple-upgraded" type="button" data-product-atc="">
      <span class="atc-button--text">
        
          Add to cart
        
      </span>
      <span class="atc-button--icon"><svg aria-hidden="true" focusable="false" role="presentation" width="26" height="26" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">
  <g fill-rule="nonzero" fill="currentColor">
    <path d="M13 26C5.82 26 0 20.18 0 13S5.82 0 13 0s13 5.82 13 13-5.82 13-13 13zm0-3.852a9.148 9.148 0 1 0 0-18.296 9.148 9.148 0 0 0 0 18.296z" opacity=".29"></path><path d="M13 26c7.18 0 13-5.82 13-13a1.926 1.926 0 0 0-3.852 0A9.148 9.148 0 0 1 13 22.148 1.926 1.926 0 0 0 13 26z"></path>
  </g>
</svg></span>
    </button></div>
</div>
</div>
</div>