Question

仅限Chrome浏览器，在此网站http://jacquelynchastain.com上，所有链接都会在加载时设置动画。加载时此页面上应该有零动画。

Here is the best screenshot我可以了解正在发生的事情：当页面加载时，链接开始像默认的Foundation 5链接/按钮一样。加载时，他们会假设正确的样式，页面最终看起来正确。

e.g。默认链接样式是一个小的蓝色字体;菜单链接样式是一个较大的绿色字体，具有CSS过渡。转换被触发并导致动画从默认链接文本到正确的样式，这绝对是不可取的。我已经确认此问题仅发生在Chrome中，并且看起来并非所有人都看到它，但有些是。

技术规格：

我在Mac，OSX版本10.9.4，Chrome 36.0.1985.143

Firefox，Safari或Internet Explorer中不会发生此问题。我已经在Mac和PC上与至少7个其他人进行了验证，这也发生在他们的Chrome版本中。

更新：

以下是发生问题的剥离代码：

效果：css转换正在加载时以某种方式触发＆amp;

表示链接样式正在设置动画（即从默认大小增加到2em）

条件：仅限Chrome。仅当存在表单元素时，css包含在外部文件 AND 中时才会发生。如果css包含在内，或者表单元素被删除，则不会发生这种情况。

HTML：

<!DOCTYPE HTML>
<head>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
    <p><a href="#">Test</a></p>
    <form></form>

</body>
</html>

CSS：

a{
font-size:2em;
-webkit-transition:all 0.3s ease-out;
-moz-transition:all 0.3s ease-out;
transition:all 0.3s ease-out;
}

导致这种情况的原因是什么？

Answer 1

我可以在加载页面时看到你的意思。

使用元素检查器，我可以看到默认链接颜色为蓝色，而.mainnav中的链接为较大字体的绿色。你的mainnav链接也有一个css过渡，你看到的是从初始的小蓝色文本到页面加载中较大的绿色文本的转换。

解决这类问题的最佳方法是去除所有内容，看看当你逐件添加时会发生什么。例如您是否通过Javascript添加导致转换触发的类？

要快速修复，请尝试将foundation.css中的默认链接颜色更改为绿色，以便不会出现颜色过渡。

仅供参考，您的代码中注释了normalize.min.css和foundation.min.css，因此与您导入它们的方式无关：）

Answer 2

看来文件'modernizer.js'对于此页面正常运行是绝对必要的。

我已将其删除，而不是收到一封电子邮件，其中包含一些关于我如何改进页面的提示，并提醒我没有正确链接到该文件，这是404'ing。现在 - 为什么页面工作之前我甚至没有正确链接到这个文件但在页面上有它，我不确定。但是，将文件添加回页面并正确链接到该页面已经解决了我的问题！感谢大家的帮助。

Chrome动画链接页面加载

2 个答案: