In Chrome only, on this site http://jacquelynchastain.com, all of the links are animating on load. There should be zero animation on this page when it loads.
Here is the best screenshot I can get of what's happening: when the page loads, the links start off styled like the default Foundation 5 links/buttons. When loaded they assume the correct styling and the page ends up looking correct.
e.g. the default link style is a small blue font; the menu link style is a larger green font with a CSS transition. The transition is getting triggered and causing the animation from default link text to the correctly styled which is definitely undesirable. I have verified this issue is only happening in Chrome, and it seems not everyone is seeing it but some are.
Tech Specs:
I am on Mac, OSX version 10.9.4, Chrome 36.0.1985.143
This issue does not happen in Firefox, Safari, or Internet Explorer. I have verified with at least 7 other people on Mac and PC that it also happens in their version of Chrome.
UPDATE:
Below is the stripped back code where the problem is happening:
Effect: The css transition is being triggered on load somehow & the link style is being animated (i.e. grows from the default size to 2em) instead of just being applied.
Conditions:On Chrome only. Only happens when the css is included in the external file AND when there is a form element. It doesn't happen if the css is included inline, or if the form element is removed.
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;
}
What could be causing this?
a
directly, so never came across this problem. I was going to suggest moving the css transition to the containingdiv
, but that won't transition thea
style so forget that :) Glad you got sorted anyway! I'm the same, I always want to solve problems properly (even this, which wasn't my issue!). Good luck with the job hunt. – FluffyKitten Aug 16 '14 at 3:56