如果页面包含css转换，是否有可能像Modernizr这样的特征检测器在脚本加载时中断页面呈现？

Question

问题

如果页面包含css转换，是否有可能像Modernizr这样的特征检测器在脚本加载时中断页面呈现？

抽象

我正在尝试使用css transform创建动画，其中箭头沿着不可见的线向下移动。在加载modernizr库之前，事情很有效。此时，所有元素都旋转45度并剥离成细线（很可能元素被钩到动画箭头的角度），就像这样。

如果我删除对modernizr的脚本调用，页面会像这样正确呈现。

无论是否加载了modernizr，动画都能完美无瑕 - 只是页面的呈现似乎分手了。作为脚本的Modernizr似乎顺便加载 - 它只是与视觉输出相混淆。

注意：在代码段查看器中尝试以下几行代码似乎可以呈现所有内容，但上面的图片证明了一些不同之处。可见文本与图像不同，但所有代码都相同。

动画css看起来像这样（感谢Joshua MacDonald的灵感 - https://codepen.io/JoshMac/pen/MaYEmJ）。

$(document).ready(function() {
  var config = {
    elements: {
      navheader: "header",
      navheadstyle: "header h1"
    },
    identifiers: {},
    classes: {
      parallaxtop: ".parallax-1"
    }
  };

  $(function() {
    $(config.elements.navheader).data("size", "big");
  });

  $(window).scroll(function() {
    if ($(document).scrollTop() > 0) {
      if ($(config.elements.navheader).data("size") === "big") {
        $(config.elements.navheader).data("size", "small");
        $(config.elements.navheadstyle).stop().animate({
            "font-size": "2.0em"
          },
          200
        );
      }
    } else {
      if ($(config.elements.navheader).data("size") === "small") {
        $(config.elements.navheader).data("size", "big");
        $(config.elements.navheadstyle).stop().animate({
            "font-size": "2.5em"
          },
          200
        );
      }
    }
  });

  (function() {
    var parallax = document.querySelectorAll(".parallax"),
      speed = 0.5;

    $(window).scroll(function() {
      [].slice.call(parallax).forEach(function(el, i) {
        var windowYOffset = window.pageYOffset,
          elBackgrounPos = "0 " + windowYOffset * speed + "px";

        el.style.backgroundPosition = elBackgrounPos;
      });
    });
  })();
});

/*! HTML5 CSS3 Styles v1.0.0 */

html,
body,
ol,
ul,
li,
p {
  font: normal normal normal 15px/normal 'Titillium Web', 'Montserrat', 'Raleway', 'Gudea', 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  text-align: left;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.05), 0px 2px 8px rgba(0, 0, 0, 0.05), 0px 2px 4px rgba(0, 0, 0, 0.15);
}

body {
  background: #fff;
  color: #606060;
}

nav {
  background: rgb( 255, 255, 255);
  /* Fall-back for browsers that don't
                                    support rgba */
  background: rgba(255, 255, 255, 0.9);
}


/* Desktop styles */

@media (min-width: 300px) {
  header nav li:first-child {
    display: none;
  }
  header.wrapper {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
  }
  header nav ul {
    margin: 10px auto;
    width: 100%;
    text-align: center;
  }
  header nav li {
    display: inline-block;
    list-style-type: none;
    font-weight: bold;
    padding: 0 10px;
  }
  header .container h1 {
    font: normal normal normal 2.5em/normal 'Gudea', Helvetica, Arial, sans-serif;
  }
  header .container>div {
    padding: 10px;
    text-align: center;
    text-transform: uppercase;
  }
  nav .floatright {
    /* This should be replaced with something more convenient. Mobiles don't use this - better remove it from the code stack. */
    float: right;
  }
}

header:after,
nav:after,
.floatright:after,
.arrowcontainer>div:after {
  content: '';
  display: block;
  clear: both;
}


/* ============================================================
  SECTIONS
============================================================ */

section.module:last-child {
  margin-bottom: 0;
}

section.module h2 {
  font-family: 'Playfair Display', serif;
  width: 25%;
  margin: 0 auto 40px auto;
  font-size: 2.8em;
  text-align: center;
}

section.module p {
  font-family: 'Open Sans Condensed', sans-serif;
  margin-bottom: 40px;
  font-weight: 300;
}

section.module p:last-child {
  margin-bottom: 0;
}

section.module.content {
  padding: 40px 0;
}

section.module.parallax {
  padding: 0;
  background-position: 0 0;
}

section.module.parallax h1 {
  font-family: 'Playfair Display', serif;
  width: 50%;
  margin: 0 auto;
  font-size: 4em;
  text-align: center;
}

section.module.parallax-1 {
  background: #c0c0c0;
}

footer.module.parallax-2 {
  background: #555;
}

section.module.parallax-3 {
  background: #0000ff;
}

@media all and (min-width: 600px) {
  section.module h2 {}
  section.module p {}
  section.module.parallax {
    padding: 350px 0;
  }
  section.module.parallax h1 {}
}

@media all and (min-width: 960px) {
  section.module.parallax h1 {}
}

.arrowcontainer {
  position: relative;
  width: 100%;
  bottom: -5em;
  text-align: center;
}

.arrowtext {
  font-weight: bold;
}

.arrow,
.arrow:before {
  position: absolute;
  left: 0;
  bottom: 0;
  text-align: center;
}

.arrow {
  fill: none;
  width: 20px;
  height: 20px;
  top: 20%;
  left: 50%;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  border-left: none;
  border-top: none;
  border-right: 1px transparent solid;
  border-bottom: 1px transparent solid;
}

.arrow:before {
  content: '';
  width: 20px;
  height: 20px;
  top: 50%;
  border-left: none;
  border-top: none;
  border-right: 1px #000 solid;
  border-bottom: 1px #000 solid;
  /*-webkit-animation-delay: 2s;
  -ms-animation-delay: 2s;
  animation-delay: 2s;*/
  -webkit-animation-duration: 2s;
  -ms-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-fill-mode: none;
  -ms-animation-fill-mode: none;
  animation-fill-mode: none;
  -webkit-animation-timing-function: ease-in-out;
  -ms-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
  -webkit-animation-name: arrow;
  -ms-animation-name: arrow;
  animation-name: arrow;
}

@keyframes arrow {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    -webkit-transform: translate(40px, 40px);
    -ms-transform: translate(40px, 40px);
    transform: translate(40px, 40px);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://www.gisslen.net/framework/core/client/modernizr-3.5.0-custom.min.js"></script>
<header class="wrapper">
  <nav>
    <div class="container">
      <!-- Start: Navigation -->
      <div>
        <h1>Main title</h1>
        <ul>
          <li>Link 1</li>
          <li>Link 2</li>
          <li>Link 3</li>
          <li>Link 4</li>
          <li>Link 5</li>
        </ul>
      </div>
      <!-- End: Navigation -->
    </div>
  </nav>
</header>
<!-- Start: Page content -->
<main>
  <section class="module parallax parallax-1">
    <div class="container">
      <h1>Block title</h1>
      <div class="arrowcontainer">
        <div class="arrowtext">Supportive text</div>
        <div class="arrow"></div>
      </div>
    </div>
  </section>
  <section class="module content">
    <a name="concept"></a>
    <div class="container">
      <h2>Block subtitle</h2>
    </div>
  </section>
  <section class="module content">
    <a name="news"></a>
    <div class="container">
      <h2>Block subtitle</h2>
    </div>
  </section>
</main>
<!-- End: Page content -->
<!-- Start: Footer -->
<footer class="module parallax parallax-2">
  <div class="container">
    <div class="footer-bottom">
      <ul>
        <li>Link 1</li>
        <li>Link 2</li>
        <li>Link 3</li>
      </ul>
    </div>
  </div>
</footer>
<footer class="wrapper">
  Last updated span
</footer>
<!-- End: Footer -->

上面的HTML代码段被这些代码行包​​围（因为它们不应添加到代码段短信服务器中）。

<!DOCTYPE html>
<html class="no-js">
<head id="Head1">
  <meta charset="utf-8" />
  <title>Testing</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
  <form name="form1" method="post" action="./" id="form1">
    <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMjEwNDQyMTMxMw9kFgJmD2QWAgIDD2QWAgIDDw8WAh4EVGV4dAUVcmV2aXNlZCAxNjAxLjEuMS4wMTAwZGRkfaEsWaMfAzoF2J+iiXEZuLql9BHgAUKPamIAH6P8sG0=" />
    <div>
    </div>

    The snippet above...

    <div>
      <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="CA0B0334" />
    </div>
  </form>
</body>
</html>

我正在使用modernizr-3.5.0-custom.min.js检查所有功能和选项以及jquery-3.2.1.min.js（在代码段查看器中可用的最新jQuery版本是2.1.1，但它们在此特定事项中的工作方式完全相同）。

Answer 1

您的问题归因于.arrow课程。 modernizr所做的是它为你的html标签添加了类。这些类旨在供您在CSS代码中使用，因此您可以添加回退样式，以防浏览器中不支持该功能。

运行该页面然后请检查由google开发工具中的modernizr添加的html类，如果找到关键字arrow，那么您会发现在html标记中添加了一个与您相同名称箭头的类正在为您的箭头使用相同的类名。这会将所有动画类应用于html标记，因此它会使用箭头动画的效果进行渲染。

要解决此问题，请将.arrow类名称更改为其他名称，例如.arrow-animation，或者尝试将.arrowcontainer中使用的所有类声明为嵌套在父类如下：

.arrowcontainer .arrowtext {...}

.arrowcontainer .arrow,
.arrowcontainer .arrow:before {...}

.arrowcontainer .arrow {...}

.arrowcontainer .arrow:before {...}

这将解决您的渲染问题。

希望这能解释问题并帮助您继续。

快乐编码：）