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

Question

问题

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

文摘

我试图使用css transform创建一个动画，其中箭头沿着一条不可见的线向下移动。在我加载现代化图书馆之前，一切都很顺利。在这一点上，所有的元素旋转45度，并剥离成一条细线(很可能这些元素被钩到动画箭头的角度)像这样。

​

如果删除对现代化的脚本调用，页面将正确呈现如下所示。

​

​

动画作品完美无瑕，不管是否加载了现代化--只是页面的呈现方式似乎被打破了。作为脚本似乎加载没有错误，顺便说一句-它只是混乱的视觉输出。

注意:在代码段查看器中尝试下面这些代码行的似乎呈现了它应该呈现的所有内容，但是上面的图像证明了一些不同的东西。可见文本与图像不同，但所有代码都是相同的。

动画的css看起来是这样的(灵感-https://codepen.io/JoshMac/pen/MaYEmJ归功于约书亚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类造成的。现代化的做法是将类添加到html标记中。这些类用于CSS代码中，因此在浏览器中不支持功能时，可以添加回退样式。

运行该页面，然后请检查在google中由现代主义添加的html类，如果您找到关键字箭头，则会发现在html标记中添加了一个类，因为您对箭头使用了相同的类名。这也将所有动画类应用到html标记，因此它使用箭头动画的效果进行呈现。

为了解决这个问题，要么将.arrow类名更改为其他名称(如.arrow-animation )，要么尝试将.arrowcontainer中使用的所有类声明为嵌套在父类下，如下所示：

.arrowcontainer .arrowtext {...}

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

.arrowcontainer .arrow {...}

.arrowcontainer .arrow:before {...}

这将修复您的呈现问题。

希望这能解释这个问题，并帮助你继续前进。

快乐编码:)