title: Images appearing in all browsers but firefox
body: <p>I have a website that displays fine in chrome but not in Firefox.</p>
  
  <p>This is chrome:</p>
  
  <p><a href="https://i.stack.imgur.com/fo61C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fo61C.png" alt="enter image description here"></a></p>
  
  <p>This is Firefox:</p>
  
  <p><a href="https://i.stack.imgur.com/MhBzS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/MhBzS.png" alt="enter image description here"></a></p>
  
  <p>Three of the four main images are missing - oddly the 4th one displays fine, despite having identical code. the inspector shows the images are downloading successfully:</p>
  
  <p><a href="https://i.stack.imgur.com/lPdWv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lPdWv.png" alt="enter image description here"></a></p>
  
  <p>I have also cleared the caches, updated Firefox, etc., to no avail.</p>
  
  <p>In response to the queries: </p>
  
  <p>All images are served from digital ocean, not locally.</p>
  
  <p>This is the css and html for the learn image and the smile image, of which the smile image appears in FF while the learn button doesn't:</p>
  
  <p>CSS</p>
  
  <blockquote>
  <pre><code>    .four_box {
          position: absolute;
      }
  
      .four_btn {
          cursor: pointer;
          transition: all .7s;
      }
  
      .four_label_anchor {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          position: absolute;
          top: 0;
          left: 0;
          pointer-events: none;
      }
  
      .smile_size {
          height: 262px;
          width: 326px;
      }
  
      .learn_size {
          height: 263px;
          width: 183px;
      }
  </code></pre>
  </blockquote>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="learn" class="learn_size four_box" style="top: 437px; left: 771px;"&gt;
      &lt;img id="learn_btn" class="learn_size four_btn" style="
       background: url(/static/img/swirl_home/chalk-btn.png);"
       onclick="animHome(this.id);"&gt;
  
      &lt;div class="learn_size four_label_anchor"&gt;
          &lt;div id="learn_label" class="four_label"&gt;Learn&lt;/div&gt;
              &lt;button id="learn_return" class="btn_href return_btn"&gt;
                  return
              &lt;/button&gt;
          &lt;/div&gt;
      &lt;/div&gt;
   &lt;/div&gt;
  
  &lt;div id="smile" class="smile_size four_box" style="top: 438px; left:     954px;"&gt;
  
     &lt;img id="smile_btn" class="smile_size center four_btn" style="
          background: url(/static/img/swirl_home/bird-btn.png);"
          onclick="animHome(this.id); homeSnapshots();"&gt;
  
     &lt;div class="smile_size four_label_anchor"&gt;
  
         &lt;div id="smile_label" class="four_label"&gt;Smile&lt;/div&gt;
              &lt;button id="smile_return" class="btn_href return_btn"&gt;
                  return
              &lt;/button&gt;
  
         &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I will reread the Firefox link</p>