I'm having some troubles using a link and an input element simultaneously, which is pretty odd!

CSS transitions are being fired upon load, even tho I'm using an hover effect and only if the input element is present on the site. All this is for Chrome, haven't tested this in other browsers.

Here is my code simplified to the issue at hand:

HTML:

<input type="text" placeholder="Test search" /> <a href="#">Test</a>

CSS:

a { background: #000; transition: background 3s ease; } a:hover { background: none; }

Link to example: https://embed.plnkr.co/ri5FknRdbPDY7T2lNldS/ Try and refresh the live preview a couple of times to see the issue. (This will not work on JSFiddle or Codepen, simple because they use internal styles. To reproduce this problem the styling has to come from an external stylesheet which is why I created this on Plunker.)

If I inline the css code in style tags in the head, there is no problem. If I remove the input element, there is no problem either. And it seems only to be a problem on link elements.

What is going on here? :) - Thanks!