2
問題如果頁面包含css轉換，是否可以使用Modernizr等特徵檢測器在腳本加載時中斷頁面呈現？
是否有可能爲特徵檢測，如Modernizr的腳本時負載打破頁面呈現如果頁面包含CSS變換？
摘要
我想創建使用CSS transform其中一個箭頭沿着無形的線向下移動的動畫。事情很好，直到我加載modernizr庫。在這一點上，所有的元素都旋轉了45度，然後剝離成一條細線（很可能這些元素被鉤到了動畫箭頭的角度）。 
如果我刪除對modernizr的腳本調用，頁面就會像這樣正確呈現。如果Modernizr的加載或不
的動畫作品，無論無瑕 - 它只是似乎打破了網頁的呈現。 Modernizr作爲腳本似乎沒有錯誤的方式加載 - 它只是與視覺輸出混淆。
注意：在代碼片段查看器中嘗試使用以下這些代碼行似乎會渲染所有內容，但上面的圖片證明了一些不同之處。可見文本與圖像不同，但所有代碼都是相同的。
動畫的CSS看起來像這樣（感謝約書亞麥克唐納的靈感 - 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版本avaliable是2.1.1，但他們的工作在這個特殊的事情都是一樣的）。
你是最好的還是最好的？ :)我一直在撕裂我的頭髮，試圖理解它發生的原因！非常感謝 - 這正是錯誤的！我改變了.arrow爲.arrowanimation，現在它按我的預期工作。我已經接受你的答案！ –
很高興幫助我的朋友。如果你能投票答覆我的回答，那也會很棒。快樂的編碼。 –
完成交易。感謝你的幫助！ :) –