Slide transitions erase elements on top of Firefox
Firefox seems to work oddly when it comes to elements z-index
and position:absolute
that are stacked on top of each other.
I have a menu on top of a slideshow (given by Cycle2 ), but I decided to complicate things by using transform: rotate(45deg);
on the container and then transform: rotate(-45deg);
on the element inside it to create a diamond-like effect. I created two sets of them, one for the slideshow and one for the menu. Here's an example:
<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>
Here's the problem: When the slideshow transitions, the text on top of it gets blurry. This issue seems to be exclusive to Firefox on Mac OSX.
Strange, creating a jsFiddle doesn't duplicate the issue: http://jsfiddle.net/2oywbn4m/1/
However, the problem exists on my dev site .
I've made a lot of tools and removing transform: rotate(45deg);
from the menu seems to be the only thing that solves the problem ... however I need this effect to achieve the diamond effect (I don't want to resort to using images).
EDIT : It looks like the twist is transform
definitely part of the problem, but only part. Doing this by itself doesn't cause a problem (see my jsFiddle). I'm just not sure what other factor is causing this effect. This is not a font problem, nor is it a problem z-index
. This is not a question background:rgba()
. This is also not a problem with the plugin itself. Using other transition effects and other slider plugins still causes this problem.
Regular condition
In transition mode
UPDATE: This is a conflict with ClearType that Cycle2 consulted: http://jquery.malsup.com/cycle/cleartype.html?v3
$('#slideshow').cycle({
cleartype: false // disable cleartype corrections
});
source to share
This is a workaround.
-
Get the angles of the triangle required using the triangle border for the pseudo elements.
-
Please remove thisRemove those unnecessary changes to prevent the error and move your title.overflow: hidden
one to prevent the error.
You will need to play with the width to get the correct result, but here is my basic concept .
Here is your triangle border for the top:
.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;
}
Here is your triangle border at the bottom:
.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;
}
Examples of changes:
(only width changed)
.head-top {
position: absolute;
left: 35%;
height: 3em;
top: 6px;
padding: 1em 4em;
width: 50%;
}
(only width changed)
.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);
}
source to share