web-dev-qa-db-ja.com

chrome

私は画像を持っていますが、ホバーでぼかすと少し動きます。画像がその位置で揺れるようなものです。問題はchromeでのみ発生します（chromium 63 linux-x86_64でテスト））

.item img{
  transition: 250ms all ease-in-out;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.item:hover img{
  filter: blur(2px)
}

この問題 に関連している可能性があると私は考えましたが、解決策はどれも機能しませんでした。

image moves on hover

UPDATE：

@チェイスが言ったように 、これはchromeバグであり、最も安定した解決策はそれが修正されるのを待つことです。しかし、現時点では、この問題の最良の解決策is @ kosh Very's answer

cssgoogle-chromecss-transitionscss-filters
17
Amin

これは確認済みのChrome最近のアップデートでポップアップしたバグであり、うまくいけばすぐに解決されるはずです。

以下は、テストケースを削減したものです。 https://codepen.io/chasebank/pen/KZgYXK

これが Chromiumの問題 のトリアージとしてマークされています。

今のところ最善のことは何もないと思います。適切な修正が実装されるのを待ちます。承認済みのブラウザのバグをハッキングすることは決して良い考えではありません。

Chrome users who最近更新。私の最初の試みは、熟練した開発者でいっぱいのSlackチャネルを要求することでしたtheyもそれを見ていない。

$('#toggleBlur').click(function() {
  $('#content').toggleClass('blur')
})
body {
  padding: 5%;
}

div {
  filter: blur(0px);
}

.blur {
  filter: blur(.1px)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggleBlur">Toggle blur</button>

<div id="content">
  <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Accusantium eum nisi voluptate eaque! Sequi sit nemo iste. Earum accusantium rerum consectetur cumque sequi maiores maxime reiciendis, alias beatae accusamus labore.</p>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptate enim magnam nemo atque, ad placeat ab unde consequatur minima velit, ipsam tempora laudantium molestias sapiente perspiciatis quaerat modi ratione voluptatem?</p>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti commodi cum sed nemo fugiat non esse ex quos consectetur ipsam alias laboriosam, cumque eaque omnis quae accusamus, repellat dolore modi!</p>
</div>
9
Chase

私には2つの解決策があります。

filter：blur（0.2px）hack（私に質問しないでください）

.item img
{
  transition: filter 250ms ease-in-out;
  filter: blur(0.2px); /* the lowest value I could get on my machine: 0.12805650383234025436px */
  image-rendering: -webkit-optimize-contrast; /* just in case quality degrades */
}

.item:hover img
{
  filter: blur(2px);
}

冗談はさておき、これはおそらくプロセッシングユニットによって行われる浮動小数点数の最適化が原因で発生するため、blurを.2pxに設定することで、blur（0px）をアニメーション化せず、代わりに別の値から開始して、このように計算するのではなく（線形イージング）：

frame1: 0, frame2: .1, frame3: .2, frame4: .3, ...

それはそのように計算します：

frame1: .2, frame2: .2666, frame3: .3332, ...

そのため、増分値が変更され、誤った位置付けを引き起こしなくなりました。もちろん、ここには適切な数学はありませんが（これはイージングで特に注意が必要です）、アイデアはわかります。

これにより、ジグルのある最初のフレームもスキップされます。

ぼやけた画像を複製して画像を切り替えます （これも最もパフォーマンスの高い方法です）

<div class="item">
    <img class="blurred"  src="https://www.wikihow.com/images/thumb/2/25/Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg/aid8673811-v4-728px-Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg" alt="">
    <img class="original" src="https://www.wikihow.com/images/thumb/2/25/Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg/aid8673811-v4-728px-Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg" alt="">
</div>

.item
{
  position: relative;
}

.item img
{
  max-width: 300px;
  transition: opacity 250ms ease-in-out;
  will-change: opacity;
}

.item .original
{
  transition-delay: 0;
}

.item .blurred
{
  position: absolute;
  filter: blur(5px);
  opacity: 0;
  transition-delay: .1s;
}

.item:hover .original
{
  opacity: 0;
  transition-delay: .2s;
}
.item:hover .blurred
{
  opacity: 1;
  transition-delay: .1s;
}
5
CyberAP

私の2セント：

.item {
  width: 200px;
  height: 150px;
  overflow:hidden;
}

img {
  width: 200px;
  transition:filter .5s;
  
  transform: translate3d(-1px, -1px, 0);
  border:solid 1px transparent;
  border-width:1px 0 0 1px;
}

img:hover {
  filter: blur(5px);
}
<div class="item">
  <img src="https://www.wikihow.com/images/thumb/2/25/Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg/aid8673811-v4-728px-Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg" alt="">
</div>
3
Kosh

これを正しく機能させる唯一の方法は、svgフィルターを使用して、GSAPでフィルターのぼかしをアニメーション化することです。

https://jsfiddle.net/eg5yhu26/4/

var timeline = TweenMax.to("#hue1feGaussianBlur", 5, {
  paused: true,
  attr: {
    "stdDeviation": 5
  },
  onUpdateParams: ["{self}"]
});

$(document).on("mouseenter", ".c-grid__item a", function() {
  timeline.play();
});
$(document).on("mouseleave", ".c-grid__item a", function() {
  timeline.reverse();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
<div class="c-grid">
  <div class="c-grid__item">
    <a href="" title="">
      <svg width="100%" height="100%" viewBox="0 0 538 196" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <defs>Using feColorMatrix for Tint FX</defs>
        <!--<filter id="hue1">
        <feColorMatrix id="hue1feColorMatrix" in="SourceGraphic" type="hueRotate" values="0"/>
 </filter>-->
        <filter id="hue1" x="0" y="0">
          <feGaussianBlur id="hue1feGaussianBlur" in="SourceGraphic" stdDeviation="0" />
        </filter>
        <image xlink:href="https://www.wikihow.com/images/thumb/2/25/Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg/aid8673811-v4-728px-Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg" width="100%" height="100%" filter="url(#hue1)" />
      </svg>
    </a>
  </div>
</div>
2
Robin Mimeault

私は多くの調査を行い、さまざまな方法を試しましたが、この不具合を修正するものは何もないようです。このジャンプを回避する唯一の方法は、画像の最初にぼかし効果を与えるか、トランジションを削除することです（トランジションなしの問題はなく、もちろんこれは考慮すべきオプションではありません）。

したがって、私が見つけた回避策は、2つの異なるイメージを使用し、最初にblur(1px)を含めることです。

_opacity:0_によってぼかし効果が隠された画像を作成し、同じ画像を背景として使用して、初期画像なしぼかし効果をシミュレートするという考え方です。次に、秘訣は、不透明度の遷移をフィルターの遷移よりも速くすることです。これにより、blur(1px)の効果と、blur(2px)の効果を確認できます。

_.item {
  width: 200px;
  height: 150px;
  background: url(https://www.wikihow.com/images/thumb/2/25/Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg/aid8673811-v4-728px-Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg);
  background-size: 100%;
}

img {
  width: 200px;
  display: inline-block;
  transition: 2s filter ease-in-out, 0.1s opacity ease-in-out;
  filter: blur(1px);
  opacity: 0;
}

img:hover {
  opacity: 1;
  filter: blur(2px);
}_
_<div class="item">
  <img src="https://www.wikihow.com/images/thumb/2/25/Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg/aid8673811-v4-728px-Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg" alt="">
</div>_

このトリックにはより多くのHTML/CSSが関係し、サイトの各画像を変更する必要があると思いますが、たとえば、これを行うjQueryコードを作成できます。このエフェクトが必要な画像に追加するクラスを作成し、このクラスをターゲットにして、トリックに必要なコードを追加するだけです。

次に例を示します。

_$('img.blur').each(function() {
  var url = $(this).attr('src');
  $(this).wrap("<div style='display:inline-block;font-size:0;background-image:url(" + url + ");background-size: 100%;'></div>")
})_
_.blur {
  transition: 2s filter ease-in-out, 0.1s opacity ease-in-out;
  filter: blur(1px);
  opacity: 0;
}

.blur:hover {
  opacity: 1;
  filter: blur(3px);
}_
_<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<img src="https://www.wikihow.com/images/thumb/2/25/Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg/aid8673811-v4-728px-Collect-Bodily-Fluid-Samples-from-a-Cat-Step-16.jpg" width="200" class="blur">

<img src="https://lorempixel.com/300/300/" width="300" class="blur" />

<img src="https://lorempixel.com/400/400/" width="400" class="blur" />_
1
Temani Afif