如果页面包含css转换，功能检测器（如Modernizer）是否可能在脚本加载时中断页面呈现？

问题

如果页面包含css转换，功能检测器（如Modernizer）是否可能在脚本加载时中断页面呈现

摘要

我正在尝试使用css

transform

创建一个动画，其中箭头沿着一条不可见的线向下移动。在我加载Modernizer库之前，一切都很顺利。此时，所有元素都旋转45度并剥离成一条细线（最有可能的是元素与动画箭头的角度挂钩），如下所示。

如果我删除脚本调用以使页面现代化，页面将正确呈现如下所示

无论是否加载Modernizer，动画都会完美无瑕地工作——似乎只有页面的呈现出现问题。顺便说一下，Modernizer作为脚本加载时似乎没有错误——它只会干扰视觉输出

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

动画css看起来像这样（归功于Joshua MacDonald的灵感-）

$（文档）.ready（函数（）{
变量配置={
要素：{
导航标题：“标题”，
导航头样式：“标题h1”
},
标识符：{}，
课程：{
视差：视差-1
}
};
$（函数（）{
$（config.elements.navheader）.data（“大小”、“大”）；
});
$（窗口）。滚动（函数（）{
如果（$（文档）.scrollTop（）>0）{
if（$（config.elements.navheader）.data（“大小”）=“大”）{
$（config.elements.navheader）.data（“大小”、“小”）；
$（config.elements.navheadstyle）.stop（）.animate({
“字体大小”：“2.0em”
},
200
);
}
}否则{
if（$（config.elements.navheader）.data（“大小”）=“小”）{
$（config.elements.navheader）.data（“大小”、“大”）；
$（config.elements.navheadstyle）.stop（）.animate({
“字体大小”：“2.5em”
},
200
);
}
}
});
（功能（）{
var parallax=document.querySelectorAll（“.parallax”），
速度=0.5；
$（窗口）。滚动（函数（）{
[].slice.call（视差）.forEach（函数（el，i）{
var windowYOffset=window.pageYOffset，
elBackgrounPos=“0”+窗口偏移*速度+“px”；
el.style.backgroundPosition=elbackgroundposition；
});
});
})();
});
/*！HTML5 CSS3样式v1.0.0*/
html，
身体，
ol,，
ul，
锂，
p{
字体：标准15px/normal'Titillium Web'、'Montserrat'、'ralway'、'Gudea'、'Open Sans'、'Helvetica Neue'、Helvetica、Arial、Sans serif；
文本对齐：左对齐；
文本阴影：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）；
}
身体{
背景：#fff；
颜色：#606060；
}
导航{
背景：rgb（255、255、255）；
/*回退到不支持的浏览器
支持rgba*/
背景：rgba（255，255，255，0.9）；
}
/*桌面样式*/
@介质（最小宽度：300px）{
标题导航李：第一个孩子{
显示：无；
}
头文件包装器{
显示：块；
位置：固定；
排名：0；
左：0；
宽度：100%；
}
标题导航ul{
利润率：10px自动；
宽度：100%；
文本对齐：居中；
}
标题导航李{
显示：内联块；
列表样式类型：无；
字体大小：粗体；
填充：0 10px；
}
标题.容器h1{
字体：普通2.5em/normal'Gudea'，Helvetica，Arial，无衬线；
}
header.container>div{
填充：10px；
文本对齐：居中；
文本转换：大写；
}
导航，右侧{
/*这应该被更方便的东西所取代。手机不使用它-最好从代码栈中删除它*/
浮动：对；
}
}
标题：之后，
导航：之后，
.对：之后，
.arrowcontainer>div:after{
内容：''；
显示：块；
明确：两者皆有；
}
/* ============================================================
部分
============================================================ */
第节模块：最后一个孩子{
页边距底部：0；
}
第2节模块h2{
字体系列：“Playfair显示”，衬线；
宽度：25%；
保证金：0自动40px自动；
字号：2.8em；
文本对齐：居中；
}
第4.p节模块{
字体系列：“开放式Sans压缩”，无衬线；
边缘底部：40px；
字体大小：300；
}
第4.p节：最后一个孩子{
页边距底部：0；
}
第节模块内容{
填充：40px0；
}
第节视差模块{
填充：0；
背景位置：0；
}
节.模块.视差h1{
字体系列：“Playfair显示”，衬线；
宽度：50%；
保证金：0自动；
字号：4em；
文本对齐：居中；
}
第1节视差模块-1{
背景：#C0C0；
}
footer.module.parallax-2{
背景:#555；
}
第3节视差模块{
背景：#0000ff；
}
@介质和全部（最小宽度：600px）{
节.模块h2{}
section.module p{}
第节视差模块{
填充：350px0；
}
section.module.parallax h1{}
}
@介质和全部（最小宽度：960像素）{
section.module.parallax h1{}
}
.箭头容器{
位置：相对位置；
宽度：100%；
底部：-5em；
文本对齐：居中；
}
.箭头文本{
字体大小：粗体；
}
.阿罗先生，
.阿罗：以前{
位置：绝对位置；
左：0；
底部：0；
文本对齐：居中；
}
.阿罗{
填充：无；
宽度：20px；
高度：20px；
最高：20%；
左：50%；
-webkit变换：旋转（45度）；
-ms变换：旋转（45度）；
变换：旋转（45度）；
左边界：无；
边界顶部：无；
右边框：1px透明实体；
边框底部：1px透明实心；
}
.阿罗：以前{
内容：''；
宽度：20px；
高度：20px；
最高：50%；
左边界：无；
边界顶部：无；
边界ri
.arrowcontainer .arrowtext {...}

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

.arrowcontainer .arrow {...}

.arrowcontainer .arrow:before {...}