javascript - 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';" />