幻灯片转换在Firefox中模糊元素

Question

当涉及到堆叠在彼此之上的z-index和position:absolute项时，Firefox似乎表现得很奇怪。

我在幻灯片放映之上有一个菜单（由Cycle2提供支持），但我决定在容器上使用transform: rotate(45deg);然后在transform: rotate(-45deg);内部使用<div class="rotate-plus45 slide-holder"> <div class="rotate-minus45"> <div class="slideshow"> <img src="img1.jpg" /> <img src="img2.jpg" /> </div> </div> </div> <div class="rotate-plus45 menu-holder"> <div class="rotate-minus45"> <ul class="menu"> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> </div> </div> </div> 复杂化。它创造了类似钻石的效果。我创建了两组，一组用于幻灯片，另一组用于菜单。这是一个例子：

transform: rotate(45deg);

以下是问题：幻灯片转换时，位于其上方的文字会模糊。 这个问题在Mac OSX上似乎是Firefox独有的。

奇怪的是，创建一个jsFiddle不会重复这个问题：http://jsfiddle.net/2oywbn4m/1/

但是，问题确实存在于我的dev site。

我已经做了很多工具，从菜单中删除transform似乎是解决问题的唯一方法......但是，我需要这种效果来实现我的钻石效果（我不想诉诸图像）。

编辑：似乎z-index轮换肯定是问题的一部分，但只是部分问题。单独这样做似乎不会引起问题（参见我的jsFiddle）。我不确定其他因素会导致这种影响。这不是字体问题，也不是background:rgba()问题。这不是$('#slideshow').cycle({ cleartype: false // disable cleartype corrections }); 问题。它也不是插件本身的问题。使用其他过渡效果和其他滑块插件仍会导致此问题。

---

常规状态

转型

更新：这似乎与ClearType发生冲突，Cycle2已解决此问题：http://jquery.malsup.com/cycle/cleartype.html?v3

{{1}}

Answer 1

这是一种错误解决方法。

• 使用伪元素上的三角形边框获取所需的三角形角。

• 删除overflow: hidden以防止错误。 删除那些现在不需要的转换以防止错误，和 重新定位标题。

您需要使用宽度来获得正确的结果，但here is my basic concept。

这是顶部的三角形边框：

.head-top:before {
content: '';
height: 0px;
display: block;
position: absolute;
border-top: 3em solid transparent;
top: 0px;
width: 0px;
border-left: 3em solid rgba(121, 201, 201, 0.9);
right: -3em;
}

这是底部的三角形边框：

.head-bottom:before {
content: '';
height: 0px;
display: block;
position: absolute;
top: 0px;
width: 0px;
border-left: 80px solid rgba(0, 0, 0, 0.5);
border-top: 80px solid transparent;
right: -80px;
}

示例更改：

（仅宽度已更改）

.head-top {
position: absolute;
left: 35%;
height: 3em;
top: 6px;
padding: 1em 4em;
width: 50%;
}

（仅宽度已更改）

.head-bottom {
position: absolute;
left: 25%;
height: 80px;
top: 54px;
width: 63.6%;
background: none repeat scroll 0% 0% rgba(0, 0, 0, 0.5);
}