CSS body:after伪元素在预发布站点不显示的排查请求

我正在给站点做iPad Safari上的视差背景效果，生产站点已经实现了预期效果——你可以在"current projects"板块后方看到这个视差背景，用到的CSS规则是：

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; 
}

但到了预发布站点，这个背景图片完全显示不出来。我检查了代码，发现预发布站点的主题样式文件里有针对首页的CSS规则：

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; 
}

除此之外，页面的第531行还有一段内联的<style>代码，内容和上面的规则几乎一致：

<style> 
  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; 
  } 
</style>

我用Chrome调试工具对比了两个站点，生产站点里能清晰看到body::after这个伪元素，但预发布站点里根本找不到它的踪影。有没有大佬能帮我分析下这是哪里出问题了？

内容的提问来源于stack exchange，提问作者Steve