Слайд-переходы размывают элементы поверх Firefox

Question

Firefox кажется странным, когда дело доходит до z-index и position:absolute элементов, которые сложены друг на друга.

У меня есть меню в верхней части слайда-шоу (питание от 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> 

Вот проблема: Когда слайд-шоу переходы, текст расположен на вершине размывает. Эта проблема кажется эксклюзивной для Firefox на Mac OSX.

Как ни странно, создавая jsFiddle не дублирует вопрос: http://jsfiddle.net/2oywbn4m/1/

Однако проблема существует на моем dev site.

Я сделал много инструментов вокруг, и удаление transform: rotate(45deg); из меню, кажется, единственное, что решает проблему ... однако мне нужен этот эффект для достижения эффекта бриллиантов (я не хочу прибегать к использованию изображений).

EDIT: Похоже, что поворот transform определенно является частью проблемы, но только часть. Выполнение этого само по себе не вызывает проблемы (см. Мой jsFiddle). Я просто не уверен, что другой фактор вызывает этот эффект. Это не проблема с шрифтом, и это не вопрос z-index. Это не вопрос background:rgba(). Это также не проблема с самим плагином. Использование других эффектов перехода и других плагинов слайдера по-прежнему вызывает эту проблему.

---

Обычный государственный

О переходе

UPDATE: Это, как представляется, конфликт с ClearType, который Cycle2 обратился: 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); 
}