Geek Answers Handbook

CSS Delay: Active Selector Acting

I am having problems with the proper functioning of my CSS 3 button. You can view a button on one of my project pages . The problem is that before the :active CSS selector takes effect, a second or the same delay will occur, as a result of which the button will shift a bit and change the shadow; he had not done this before. Here's the Sass code:

 @mixin transition($type, $time, $ease) { -webkit-transition: $type $time $ease; transition: $type $time $ease; } @mixin border-radius($length) { border-radius: $length; -webkit-border-radius: $length; -moz-border-radius: $length; } .project-download { color: #000300; background-color: #00910A; padding: 10px; position: relative; text-align: center; font-size: 24px; font-weight: bold; @include transition(background-color, 0.2s, linear); @include border-radius(10px); box-shadow: 1px 1px 0 0 #014D06, 2px 2px 0 0 #014D06, 3px 3px 0 0 #014D06, 4px 4px 0 0 #014D06, 5px 5px 5px 0 #000000; -webkit-box-shadow: 1px 1px 0 0 #014D06, 2px 2px 0 0 #014D06, 3px 3px 0 0 #014D06, 4px 4px 0 0 #014D06, 5px 5px 5px 0 #000000; -moz-box-shadow: 1px 1px 0 0 #014D06, 2px 2px 0 0 #014D06, 3px 3px 0 0 #014D06, 4px 4px 0 0 #014D06, 5px 5px 5px 0 #000000; &:hover { background-color: #00B00C; } &:active { box-shadow: 1px 1px 5px 0 #000000; -webkit-box-shadow: 1px 1px 5px 0 #000000; -moz-box-shadow: 1px 1px 5px 0 #000000; top: 4px; left: 4px; } }

which translates in CSS to:

 .project-download { color: #000300; background-color: #00910A; padding: 10px; position: relative; text-align: center; font-size: 24px; font-weight: bold; box-shadow: 1px 1px 0 0 #014D06, 2px 2px 0 0 #014D06, 3px 3px 0 0 #014D06, 4px 4px 0 0 #014D06, 5px 5px 5px 0 #000000; -webkit-box-shadow: 1px 1px 0 0 #014D06, 2px 2px 0 0 #014D06, 3px 3px 0 0 #014D06, 4px 4px 0 0 #014D06, 5px 5px 5px 0 #000000; -moz-box-shadow: 1px 1px 0 0 #014D06, 2px 2px 0 0 #014D06, 3px 3px 0 0 #014D06, 4px 4px 0 0 #014D06, 5px 5px 5px 0 #000000; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; -webkit-transition: background-color 0.2s linear; transition: background-color 0.2s linear; } .project-download:active { box-shadow: 1px 1px 5px 0 #000000; -webkit-box-shadow: 1px 1px 5px 0 #000000; -moz-box-shadow: 1px 1px 5px 0 #000000; top: 4px; left: 4px; } .project-download:hover { background-color: #00B00C; }

I searched google a bit, no luck. Any ideas?

EDIT : I solved the problem caused by Clicky using this JavaScript function:

 function removeLinkListeners() { var links = document.getElementsByTagName('a'); for (var i = 0; i < links.length; i++) { if (links[i].classList.contains('project-download-link')) { links[i].removeEventListener('mousedown', clicky.outbound); } } }

And changing the script initialization to this:

 <script type="text/javascript"> try { clicky.init(234973); window.onload = removeLinkListeners; } catch(e) {} </script>
+4
source share
1 answer

If you put your code in jsfiddle example ...

http://jsfiddle.net/zfFtv/

You will notice that there is no delay. Therefore, I suspect this is your javascript. Maybe getclicky code is inefficient and causes a delay when you click on it? Try disabling js files one by one to determine the problem.

+4
source

More articles:


All Articles