幻灯片在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> 

这里的问题是：当幻灯片过渡，文本位于顶部它模糊了。 在Mac OSX上，此问题似乎仅限于Firefox。

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

然而，问题并不在我的dev site存在。

我已经做了大量的工具，并从菜单中删除transform: rotate(45deg);似乎是唯一的解决问题...但是，我需要这种效果来实现我的钻石效果（我不想诉诸使用图像）。

编辑：看起来transform旋转绝对是问题的一部分，但只是部分。这样做似乎并没有引起问题（请参阅我的jsFiddle）。我只是不确定其他因素会导致这种影响。这不是一个字体问题，它不是一个z-index问题。这不是background:rgba()问题。这也不是插件本身的问题。使用其他转换效果和其他滑块插件仍然会导致此问题。

---

普通国家

在过渡

UPDATE：这似乎与ClearType的一次冲突，由此循环2已经解决：http://jquery.malsup.com/cycle/cleartype.html?v3

$('#slideshow').cycle({ 
    cleartype: false // disable cleartype corrections 
}); 

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); 
}