title: CSS body:after not displaying
body: <p>In order to show a parallax effect on Safari on iPad, I have adopted the following CSS rule:</p>
  
  <pre><code>body:after {
      content: "";
      position: fixed;
      top: 0;
      height: 100vh;
      left: 0;
      right: 0;
      z-index: -1;
      background: url(https://www.batteryminerals.com/wp-content/uploads/2015/11/F8A7576-e1520920156360.jpg) center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  </code></pre>
  
  <p>You can see this effect on <a href="https://www.batteryminerals.com" rel="nofollow noreferrer">this site</a> (behind the "current projects" section).</p>
  
  <p>The corresponding <a href="http://batmin.insightcomdes.com.au" rel="nofollow noreferrer">staging site</a> has the CSS rule:</p>
  
  <pre><code>body.home:after{
      content:"";
      position:fixed; /* stretch a fixed position to the whole screen */
      top:0;
      height:100vh; /* fix for mobile browser address bar appearing disappearing */
      left:0;
      right:0;
      z-index:-1; /* needed to keep in the background */
      background: url('http://batmin.insightcomdes.com.au/wp-content/uploads/2015/11/F8A7576-e1520920156360.jpg') center center;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
  }
  </code></pre>
  
  <p>in <a href="http://batmin.insightcomdes.com.au/wp-content/themes/wtc%2029.3.18/styles/wtc.style.css" rel="nofollow noreferrer">this file</a>.</p>
  
  <p>It also has the inline <code>&lt;style&gt;</code>:</p>
  
  <pre><code>&lt;style&gt;
      body:after{
          content:"";
          position:fixed; /* stretch a fixed position to the whole screen */
          top:0;
          height:100vh; /* fix for mobile browser address bar appearing disappearing */
          left:0;
          right:0;
          z-index:-1; /* needed to keep in the background */
          background: url('http://batmin.insightcomdes.com.au/wp-content/uploads/2015/11/F8A7576-e1520920156360.jpg') center center;
          -webkit-background-size: cover;
          -moz-background-size: cover;
          -o-background-size: cover;
          background-size: cover;
      }
  &lt;/style&gt;
  </code></pre>
  
  <p>on line 531.</p>
  
  <p>However, the background image does not display at the staging site.</p>
  
  <p>If I look in Chrome code inspector, on the production site, I see:</p>
  
  <pre><code>        ::after
       &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>but on the staging site, I don't see that ::after in code inspector.</p>
  
  <p>Can you see why please?</p>