Блог

У меня возникли проблемы с правильной работой кнопки CSS 3. Вы можете просмотреть кнопку на одной из страниц моего проекта. Проблема в том, что существует секундная задержка или около того, прежде чем :active CSS селектор вступит в силу, заставляя кнопку слегка перемещаться и изменяя тень; раньше этого не делалось. Вот код Sass:

 @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;

  amp;:hover { background-color: #00B00C; }
  amp;: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;
  }
}
  

который преобразуется в CSS в:

 .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; }
  

Я немного поискал в Google, но безуспешно. Есть идеи?

РЕДАКТИРОВАТЬ: Я решил проблему, которая вызывала щелчок, используя эту функцию JavaScript:

 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);
    }
  }
}
  

И меняем скрипт инициализации на этот:

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

Если вы разместите свой код в примере jsfiddle…

http://jsfiddle.net/zfFtv/

Вы заметите, что задержки нет. Так что я подозреваю, что это ваш javascript. Возможно, код getclicky неэффективен и вызывает задержку при нажатии на него? Попробуйте отключать ваши js-файлы один за другим, чтобы точно определить проблему.