Expandable Card Buggy for Chrome and Edge?

Hi, I am using expandable cards, very similar to the setup of the one in the documents
I like them very much but I have 2 problems, they might be bugs with f7 or with my code, im not sure as im very new to this
Firstly is that the scroll doesnt work in the expanded view? Any way to fix? It appears when in normal computer view, nut soon as you do device sizes, it disappears does the scroll bar

Secondly is that in edge and chrome it always seems to go blurry when you open card??

Any thoughts on how to fix would be appreciated!

<!-- Top Navbar -->

<f7-navbar large>

  <f7-nav-left>

    <f7-icon material="filter_list" size="40px"></f7-icon>

  </f7-nav-left>

  <f7-nav-title-large>Samuel Rhodes</f7-nav-title-large>

  <f7-nav-right sliding>

    <f7-link href="/about-me/" text="About Me"></f7-link>

    <f7-link external><a href="...\static\icons\128x128.png" download>Resume</a></f7-link>

    <f7-link href="/contact/" text="Contact Me"></f7-link>

  </f7-nav-right>

</f7-navbar>

<!-- Toolbar-->



<!-- Page content-->

<f7-block>


  <f7-card expandable>
<div style="background-image:url(http://localhost/SDRWebsite/src/static/CardImg/Flickfiend.jpg)" :style="{height: '300px'}">

  <f7-card-header text-color="white" class="display-block">

    FlickFiend

    <hr>

    <small :style="{opacity: 0.7}"><p>Underwater Hockey Training Aid</p></small>

  </f7-card-header>

  <f7-link card-close color="white" class="card-opened-fade-in" :style="{position: 'absolute', right: '15px', top: '15px'}" icon-f7="multiply_circle_fill"></f7-link>

</div>

<div class="card-content-padding">

  <!--PROJECT CONTENT GOES HERE!!-->

  <small :style="{opacity: 0.7}">

              <p>UWH is a fast-growing international sport combining sub-aquatics with the intricacies of Hockey.</p>

              <p>As a player and coach of UWH, I was annoyed by the lack of equipment for players to practice basic skills such as front flicking and back flicking, with no way of monitoring progress over short and long periods of time. After visiting a trial for the GB team, it became apparent that flicking over a goal was just not good enough. Players needed to be able to flick reliably and accurately, this became the focus of my design.</p>

              <p>I wanted to make a product which would be useful to both experienced players and young players wanting to learn and improve their intracacies alike. To do this the product would need to also be portable to be carried as a personal companion to training, modular to allow for the product to be sustainably and cheaply fixed to limit its environmental impact. It also needed to be capable  of surviving long term in the high drag and corrosive swimming pool environment. This posed significant issues designing, as I altered the products design such that when fully assembled it was neutrally bouyant, but when split into individual parts, it floated to the surface for easy collection.</p>

              <p>I started working on this project alongside my A Level studies 2 years ago, since It has featured at several national design competition finals including the Triumph Design Awards and the Big Bang Fair 2019 in Birmingham NEC. I spent last year prototyping further to modify my design to reduce manufacture costs by reeducing materials and production time. I also partially set up a trade deal with a New Zealand Company to manufacture the product with me gaining royalties from sales. Sadly, due to Brexit uncertainties and changes in the Design Right legal framework, this contract closed earlier this year.

              </p><p>As a result, I instead built a custom 3D printer capable of printing the parts needed for the product and made jigs to reduce material costs and labour time to ⅕ of the original cost and ⅓ of the time. I intend to soon start advertising my product utilizing my networking skills alongside my studies.</p>

  </small>

</div>
</f7-block>

<f7-panel>

    
      

</f7-panel>