相关疑难解决方法(0)

当div悬停时,CSS过渡效果会移动div.

正如您在示例中看到的那样,问题是"转换"转换具有可怕的副作用,即使div中的图像向下/向右移动1px(并且可能稍微调整一下？)以使其显示出来的地方和焦点......

小故障似乎应用了悬浮效果的整个时间,并且从试验和错误的过程我可以肯定地说,只有当翻译过渡移动div时才会出现(框阴影和不透明度也被应用但是没有区别)删除时的错误).

第二次编辑:实际上,问题没有解决!

在创建一个JSFiddle来说明问题时,我偶然发现了一个有趣的观察结果.只有页面有滚动条时才会出现此问题.所以只有一个div实例的例子很好,但是一旦添加了相同的div,因此页面需要滚动条,问题再次出现......

有任何想法吗？!

我发现Chrome和其他WebKit浏览器大量模糊任何已应用translate3d的css缩放内容的问题.

这是一个JS小提琴:http://jsfiddle.net/5f6Wg/.(在Chrome中查看.)

.test {
  -webkit-transform: translate3d(0px, 100px, 0px);
}

.testInner
{
  /*-webkit-transform: scale(1.2);*/
  -webkit-transform: scale3d(1.2, 1.2, 1);
  text-align: center;
}

<div class="test">
  <div class="testInner">
    This is blurry in Chrome/WebKit when translate3d and scale or scale3d are applied.
  </div>
</div>

有没有任何已知的解决方法？我在上面的简单示例中得到了这个,我可以简单地使用translate而不是translate3d - 这里的重点是将代码剥离到最基本的要素.

我正在使用-webkit-transform: rotate()Chrome 14.0.835.2 dev-m 旋转一个元素,它正在为元素内部的文本做一些非常奇怪的事情.这让我想起了当您使用"平滑"抗锯齿而不是"清晰"旋转文本时,您在Photoshop中获得的类似效果.

谁知道这里发生了什么？它是针对此webkit或Chrome版本的,还是我可以做些什么来修复它？(它也不是列表元素之间边界的抗锯齿)

这是CSS:

div.right-column.post-it
{
  position: relative;
  width: 240px;
  background-color: #fe9;
  padding: 20px;
  -webkit-transform: rotate(.7deg);
  background: #fe9 -webkit-gradient(radial, 20% 10%, 0, 50% 10%, 500, from(rgba(255,250,220,1)), to(rgba(255,238,253,0)));
  box-shadow: 1px 1px 0 #ddccaa, 
            2px 2px 0 #dbcaa8,
            3px 3px 0 #d9c8a6,
            4px 4px 0 #d7c6a4,
            5px 5px 0 #d5c4a2,
            6px 6px 1px #d3c2a0,
            4px 4px 2px rgba(90,70,50,.5),
            8px 8px 3px rgba(90,70,50,.3),
            12px 12px 5px rgba(90,70,50,.1);
}

编辑2016-07-04(因为这个问题越来越受欢迎):这是Chrome中的一个错误.开发人员正积极致力于修复.

编辑2017-05-14该错误似乎已修复,修复程序将在Chrome 60中引入

编辑2018-05-04修复已合并,但该错误仍然存​​在.

所以我有这个非常丑陋的窗口,这个窗口以CSS为中心:

.popup
{
   position: fixed;
   top: 0;
   bottom: 0;

   transform: translate(-50%, -50%);
}

但是,它在Chrome上看起来像这样(字体看起来很模糊):

但是这样在Firefox上:

当我删除transform规则时,文本看起来又漂亮又松脆,但它不再正确居中.

当我去chrome://flags执行#disable-direct-write它看起来更好,但用户显然不会这样做,它不能解决问题.

如何在让窗口居中的同时让我的字体看起来很漂亮？

我的Chrome版本是 44.0.2403.155

我有一个three.js使用WebGL 的演示,它在背景画布上呈现.当我禁用演示时,问题不再出现.

JSFiddle的背景.

没有背景的JSFiddle.

我正在尝试在浏览器页面中居中一个模态窗口.我只是想把它放在中心位置,这样它应该对所有屏幕都有响应.

我刚刚创建了一个简单的图像叠加效果，请参见下面的FIDDLE HERE。

下面的 HTML

<figure>
  <img src="http://unilaboralgirona.com/wp-content/uploads/2015/03/ZContact.jpg" alt="">
  <figcaption>
    <h3>Lorem ipsum</h3>
    <p>Lorem ipsumLorem ipsumLorem ipsumLorem ipsumLorem ipsum</p>
  </figcaption>
</figure>

现在，当我在 chrome 中查看时，图像顶部的文本和覆盖层非常模糊，在 FF 中非常清晰，但在 chrome 中则不然。

我这个，在线问题，但仍然没有找到解决办法。

这是一个已知问题吗？如何解决这个问题？

编辑：禁用硬件加速工作！但是我不能告诉我的用户这样做。

谢谢你。