On mobile devices stop top of 5th row from showing when first 4 rows are hidden

I have a website which shows a number of user entered stories. Only the first 4 rows are shown of each story with a fading text gradient from black to white. There is a show more/less button. This works well on a laptop, but when I view it on my phone (OnePlus 7T) I can see the very top of the 5th row, which looks like a number of black dots. I wan't to stop this from happening.

$(document).ready(function() {

  $(".content").on("click", '.showMore', function() {

    var $this = $(this);
    var content = $this.prev()
    var linkText = $this.text().toUpperCase();
    
    if (linkText === "MORE") {
      linkText = "Less";
      $this.siblings('div').css('height', 'auto');
      var currHeight = $this.siblings('div').height();
       $this.siblings('div').css('height', '8em');
       $this.siblings('div').animate({height: currHeight}, 500);
        $this.parent('div').addClass('fullpost');
   } else {
       $this.siblings('div').animate({height: '8em'}, 500);

       $this.parent('div').removeClass('fullpost');
      linkText = "More";
    }    
$this.html( "<a>" + linkText + "</a>" );  
  });
});

<div class="content">
  <div class="post">
    <div class="hideContent">
        <div class="post-text"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam blandit a ipsum nec pharetra. Donec eget tempus neque. Vestibulum sit amet sollicitudin ligula. Sed viverra odio nec augue fermentum condimentum. Etiam dapibus urna sit amet sagittis lobortis. Maecenas ut nisi et leo facilisis pellentesque. Pellentesque sed lacus nulla. Morbi auctor quam et neque fermentum, quis congue erat viverra. Aliquam aliquam vulputate lorem, euismod scelerisque augue finibus eu. Suspendisse efficitur bibendum nibh, blandit finibus sapien eleifend a. Vestibulum bibendum augue augue, nec dictum nisi posuere a.
       </div>
    </div>
  <div class="showMore"><a>Show more</a></div>
   </div>
</div>

.post-text::after {
    content: "";
    position: absolute;
    top: 2em;
    left: 0;
    height: 90px;
    width: 100%;
    background: linear-gradient(rgba(255, 255, 255, 0.2), white);
}

.fullpost .post-text::after {
  height:0;
  background: none;
}

.post-text{
    position: relative;;
    letter-spacing: normal;
    line-height: 2;
    font-size: 16px;
    font-family: Times, serif;
    color: #000000;
    text-align: justify;
}

.hideContent {
  overflow: hidden;
  line-height: 1em;
  height: 8em;
}

.showContent {
  line-height: 1em;
  height: auto;
}

.showMore {
  margin-top: -8px;
  cursor: pointer;
  text-align: center;
  color: #1ca099;
  font-weight: bold;
  /*text-decoration: underline;*/
}