CSS过渡效果，使图像模糊/移动图像1px的，在Chrome？CSS过渡效果，使图像模糊/移动图像1

2019-05-06 11:55发布

站内文章 / 前沿技术

52 0

走好不送

女 | 书童

私信

当DIV悬停，一个CSS过渡效果移动DIV。

这个问题，因为你可以看到的例子，就是“翻译”过渡具有使在div移动图像由1px的下/左（以及可能的调整有一点点？），使其出现出了可怕的副作用地点和失焦...

毛刺似乎适用应用于悬停效果的全部时间，从试错的过程中，我可以肯定地说似乎只在转换过渡移动DIV（箱阴影和不透明度也适用，但要没有差异发生当除去错误）。

第二编辑：其实，问题没有解决！

在创建的jsfiddle来说明我碰到一个有趣的观察跌跌撞撞的问题。当页面有滚动条的问题只发生。所以，只有一个的div实例的例子是好的，但一旦加入更多相同的div，因此网页需要滚动条问题罢工再次...

有任何想法吗？！

Answer 1:

你在CSS试过吗？

.yourDivClass {
    /* ... */

    -webkit-backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1.0, 1.0);
}

这样做是它使分裂的行为“更2D”。

背面绘制成默认允许翻转与旋转之类的事。有没有必要，如果你只移动左，右，上，下，规模或（反）按顺时针方向旋转。
翻译Z轴始终有一个零值。

编辑

现在，Chrome处理backface-visibility和transform而不-webkit-前缀。我目前不知道这将如何影响其他浏览器渲染（FF，IE），所以使用不带前缀的版本慎用。

Answer 2:

您需要应用3D变换的元素，所以它会获得自己的复合层。例如：

.element{
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

要么

.element{
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

更多关于创建层标准，你可以看到在这里：在Chrome加速渲染

一个解释：

实例（悬停绿盒）：

问题：过渡可能对同级元素闪烁效应（OSX狮子，铬30）
解决方案：其自己的复合层上的元件

当你用你的元素上的任何过渡就导致浏览器重新计算样式，然后重新布局的内容，即使过渡性质是视觉的（在我的例子是一个不透明度）和finaly油漆的元素：

这里的问题是，可以使“跳舞”或页上的“闪烁”的元素，而过渡发生的效果内容的重新布局。如果你会去设置，勾选“显示复合层”复选框，然后应用3D转换的元素，你会看到，它得到它自己的层与橙色边框概述。

元素都有自己的层后，浏览器只需要在过渡复合层，而无需重新布局，甚至油漆操作，使问题都有待解决：

Answer 3:

曾与嵌入式YouTube的iframe中相同的问题（翻译被用于定心iframe元素）。该解决方案中没有上述工作，直到尝试重置CSS滤镜和奇迹发生了。

结构体：

<div class="translate">
     <iframe/>
</div>

风格[前]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
}

风格[后]

.translate {
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  filter: blur(0);
  -webkit-filter: blur(0);
}

Answer 4:

我推荐我上最新的浏览器进行测试的实验性新属性CSS和它的好：

image-rendering: optimizeSpeed;             /*                     */
image-rendering: -moz-crisp-edges;          /* Firefox             */
image-rendering: -o-crisp-edges;            /* Opera               */
image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
image-rendering: optimize-contrast;         /* CSS3 Proposed       */
-ms-interpolation-mode: nearest-neighbor;   /* IE8+                */

有了这个浏览器会知道渲染算法

Answer 5:

刚刚发现的另一个原因正在转变，当一个元素去模糊。我用transform: translate3d(-5.5px, -18px, 0); 一旦它在被加载，但该元素变得模糊，重新定位的元素。

我尝试了所有上述建议，但事实证明，它使用的翻译值中的一个十进制值是因为我。整数不会引起模糊和渐行渐远我从整数越差模糊成了去了。

即5.5px模糊了元件最多， 5.1px最少。

只是想我会把我扔下这这里的情况下，它可以帮助任何人。

Answer 6:

我使用的步骤过渡被骗的问题，无法顺利

transition-timing-function: steps(10, end);

这不是一个解决，它是一种欺骗，不能处处适用。

我无法解释它，但它为我工作。另一个答案都不帮我（OSX，铬63，非Retina显示屏）。

https://jsfiddle.net/tuzae6a9/6/

Answer 7:

缩放将翻一番，打倒一半与zoom为我工作。

transform: scale(2);
zoom: 0.5;

Answer 8:

尝试filter: blur(0);

它的工作对我来说

Answer 9:

我试过在10级可能的解决方案。它们混合起来，他们仍然没有正常工作。总有1px的抖动底。

我觉得通过减少过渡时间过滤器解决方案。

这并没有工作：

.elem {
  filter: blur(0);
  transition: filter 1.2s ease;
}
.elem:hover {
  filter: blur(7px);
}

解：

.elem {
  filter: blur(0);
  transition: filter .7s ease;
}
.elem:hover {
  filter: blur(7px);
}

在小提琴试试这个：

 .blur { border: none; outline: none; width: 100px; height: 100px; background: #f0f; margin: 30px; -webkit-filter: blur(10px); transition: all .7s ease-out; /* transition: all .2s ease-out; */ } .blur:hover { -webkit-filter: blur(0); } .blur2 { border: none; outline: none; width: 100px; height: 100px; background: tomato; margin: 30px; -webkit-filter: blur(10px); transition: all .2s ease-out; } .blur2:hover { -webkit-filter: blur(0); }

 <div class="blur"></div> <div class="blur2"></div>

我希望这可以帮助别人。

Answer 10:

filter: blur(0)
transition: filter .3s ease-out
transition-timing-function: steps(3, end) // add this string with steps equal duration

我被设置过渡持续时间的值有助于.3s等于转变定时步骤.3s

Answer 11:

对于我来说，现在在2018年即固定我的问题的唯一的事情持具有图像元素是将其应用到我的链接元素（白色出问题闪烁线通过悬停图片上运行） transform: scale(1.05)

a {
   -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
   -webkit-transform: translateZ(0) scale(1.0, 1.0);
   transform: translateZ(0) scale(1.0, 1.0);
   -webkit-filter: blur(0);
   filter: blur(0);
}
a > .imageElement {
   transition: transform 3s ease-in-out;
}