Absolute positioned span automatically gets pushed off the webpage

Question

This is the third part of a single page website, each one taking up total viewport height and width. The span elements in div 'gun' are appearing pushed down in Firefox browser, creating a whitespace while it looks all perfectly fine in Edge. I presume this is because of the relative and absolute positioning (this was mentioned in answer to several whitespace issues) but I have no idea how to fix it.

Here's the HTML of only that part of the page (the 'end' div is sort of wrapper for the entire third section of the website):

* {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  box-sizing: border-box;
  /* Hide scrollbar for IE, Edge and Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}


/* Hide scrollbar for Chrome, Safari and Opera */

body::-webkit-scrollbar {
  display: none;
}


/*Ending */

.end {
  background-color: pink;
  width: 100%;
  height: 100vh;
  position: relative;
}


/* Gun and company */

.gun img {
  position: absolute;
  width: 38%;
  height: auto;
  object-fit: contain;
  transform: rotate(75deg) translate(20rem, -24.5rem);
  filter: sepia(0.8);
}

.gun-shadow {
  position: absolute;
  top: 32rem;
  left: 46rem;
  width: 100px;
  /*80 px, probably*/
  height: 370px;
  /*385px*/
  background-image: linear-gradient(-90deg, #ffbebe, #fffaf0);
  border-radius: 100%;
  transform: rotate(90deg);
}

.gun-shadow2 {
  position: absolute;
  top: 34.3rem;
  left: 46.5rem;
  width: 80px;
  /*60px*/
  height: 285px;
  /*300px*/
  background-color: #202b3a;
  border-radius: 100%;
  transform: rotate(90deg);
}

.spotlight {
  position: absolute;
  top: 5.8rem;
  left: 32.75rem;
  width: 530px;
  height: 600px;
  background-image: linear-gradient(-0deg, #202b3a, transparent);
  clip-path: polygon(0 0, 100% 0, 63.85% 150%, 33.35% 150%);
  /* polygon(0 0, 100% 0, 80% 100%, 20% 100%) */
  opacity: 0.4;
}

.gun-shadow2::after {
  width: 80px;
  height: 285px;
  background: fuchsia;
  border-radius: 50%;
}

<div class="end">
  <div class="gun">
    <img src="https://cdn.pixabay.com/photo/2013/07/13/11/52/pistol-158868_960_720.png" alt="the gun">
    <span class="gun-shadow"></span>
    <span class="gun-shadow2"></span>
    <span class="spotlight"></span>
  </div>
  <div class="footer">
    <div class="social-icons1">
      <ul>
        <li>
          <a href="#" class="fas fa-at"></a><span class=" content content1">Click to Email</span>
        </li>
        <li>
          <a href="#" class="fas fa-envelope-open"></a><span class=" content content2">We do have a mailbox</span>
        </li>
        <li>
          <a href="#" class="fas fa-phone"></a><span class=" content content3">Call us maybe</span>
        </li>
      </ul>
    </div>

The code might have several issues. Please let me know if you need any other information in understanding the situation. Thank you.

Edge Version:

Firefox Version:

Answer 1

The quickest fix can be reducing 2rem from top property in .gun-shadow , .gun-shadow2 and .spotlight.

Another way is to change top property to bottom property and give it a number to position it where ever you want. Try this styles:

.gun-shadow {
    position: absolute;
    bottom: -128px;
    left: 46rem;
    width: 100px;
    /*80 px, probably*/
    height: 370px;
    /*385px*/
    background-image: linear-gradient(-90deg, #ffbebe, #fffaf0);
    border-radius: 100%;
    transform: rotate(90deg);
}

.gun-shadow2 {
    position: absolute;
    bottom: -85px;
    left: 46.5rem;
    width: 80px;
    /*60px*/
    height: 285px;
    /*300px*/
    background-color: #202b3a;
    border-radius: 100%;
    transform: rotate(90deg);
}

.spotlight {
    position: absolute;
    bottom: 61px;
    left: 32.75rem;
    width: 530px;
    height: 600px;
    background-image: linear-gradient(-0deg, #202b3a, transparent);
    clip-path: polygon(0 0, 100% 0, 63.85% 150%, 33.35% 150%);
    /* polygon(0 0, 100% 0, 80% 100%, 20% 100%) */
    opacity: 0.4;
}

A very Important thing is to use absolute units like px rather than rem