Slide transitions blur elements on top of it in Firefox

Question

Firefox seems to be acting strangely when it comes to z-index and position:absolute items that are stacked on top of each-other.

I have a menu on top of a slideshow (powered by Cycle2), but I decided to complicate things by using transform: rotate(45deg); on a container and then transform: rotate(-45deg); on the item inside of it to create a diamond-like effect. I created two sets of these, 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 is the problem: When the slideshow transitions, the text positioned on top of it blurs. This issue seems exclusive to Firefox on Mac OSX.

Strangely, creating a jsFiddle does not duplicate the issue: http://jsfiddle.net/2oywbn4m/1/

However, the issue does exist on my dev site.

I've done a lot of tooling around, and removing transform: rotate(45deg); from the menu seems to be the only thing that solves the problem... however, I need that effect to achieve my diamond effect (I do not want to resort to using images).

EDIT: It appears that the transform rotation is definitely part of the problem, but only part. Doing that alone doesn't seem to cause an issue (see my jsFiddle). I'm just not sure what other factor causes this effect. It's not a font issue and it's not a z-index issue. It's not a background:rgba() issue. It's also not an issue with the plugin itself. Using other transition effects and other slider plugins still cause this problem.

---

Regular State

On Transition

UPDATE: This appears to be a conflict with ClearType, which Cycle2 has addressed: http://jquery.malsup.com/cycle/cleartype.html?v3

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

Answer 1

This is a bug workaround.

• Get the triangle corners needed using a triangle border on pseudo elements.

• Remove that overflow: hidden to prevent the bug. Remove those now un-needed transforms to prevent the bug, and re-position your header.

You will need to play with widths to get the right 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 for 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;
}

Example changes:

(only the width has been changed)

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

(only the width has been 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);
}