在Firefox上按钮事件缓慢和延迟

Question

我有一个带有背景图片的按钮。当悬停在背景上时，当悬停时，它会恢复原始大小。

CSS

.bg-img-L {
position: relative;
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center center;
width: 100%;
transition: background-size 0.5s ease;
-moz-transition: background-size 0.5s ease;
-ms-transition: background-size 0.5s ease;
-o-transition: background-size 0.5s ease;
-webkit-transition: background-size 0.5s ease;
}

.bg-img-L:hover {
  background-size: auto 105%;
}   

它在Chrome和Safari中非常完美。但是，在Firefox中，当鼠标悬停在按钮上时会有延迟。当屏幕移动时，在动画发生之前会有更长的延迟，而且速度要慢得多。

我可以提供一些修复程序，以使我的网站在Firefox中更好用吗？ 这是一个常见的Firefox问题吗？

按要求编辑 - 此问题所涉及的代码位于我网站的每篇“文章”中。每篇文章都是一个全宽和25％高度（堆叠）的帖子

HTML

<article id="post-<?php the_ID(); ?>" <?php post_class('col-md-12'); ?>>

  <div class="bg-img-L" style="background-image:url('<?php echo $thumbnail_url ?>');">

  <a href="<?php the_permalink(); ?>" class="linkage"></a>

   <!-- Put cat div overtop article -->
  <div class="cat-cell">
    <div class="cat-border">
        <h1><?php the_title(); ?></h1>
        <h2><?php the_category('  |  '); ?></h2>  
    </div>
  </div>

  <div class="cover"></div>

  </div><!-- / bg-img-L -->  

</article>

Answer 1

试试这个-moz-transition: all 0.5s ease-in-out;。

更新：

你可以尝试使用onmouserover来达到效果。请参阅fiddle here。

.big{
    -webkit-transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-ms-transition:all 0.5s ease-in-out;        
transition:all 0.5s ease-in-out;
}

<img src="http://kadeem.london/Content/Image/Money-Matters-Logo.png" class="big" width="100" height="100" name="image_name"
onmouseover="image_name.width='120';image_name.height='120';"
onmouseout="image_name.width='100';image_name.height='100';" />

Answer 2

发生这种情况是因为在Firefox（Chrome也是如此）中，div占据了图片背景的整个空间，请看一下：

所以这里有一个可能的解决方案，请使用div：

＆＃13;

＆＃13;

.wrap {
  display: block;
  width: 200px;
  margin:0 auto
}
.bg-img-L {
  position: relative;
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: center center;
  width: 100%;
  transition: background-size 0.5s ease;
  -moz-transition: background-size 0.5s ease;
  -ms-transition: background-size 0.5s ease;
  -o-transition: background-size 0.5s ease;
  -webkit-transition: background-size 0.5s ease;
  background-image: url("//lorempixel.com/200/200");
  height: 200px;
}
.bg-img-L:hover {
  background-size: auto 105%;
}

＆＃13;

<div class="wrap">
  <div class="bg-img-L"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

注意 - 我也在Chrome中遇到此行为，因此您的相关代码可以很好地改进/编辑答案