0

In first excuse me for my bad english, I'm French. I'll do the best ! I'm here today because for the first time i don't find an answer to my problem. Monday i need to show a demo of a website and i start to panic !

So, I have a div with a rotate (45deg). Within this div, I have two div other div in inline-block (with a css rotate (-45deg). On the left i have a slider and on the right text and shortcuts. Today I joined the slider to the left position (I work on joomla). It works well but I have a problem with the slide transition. If I click "next" or "previous", the global div (the main container) becomes blurred for the duration of transition. I did screenshots of the text on the right position (best seen the difference).

Fiddle for example :

http://jsfiddle.net/asakuras/8Pk3S/11/

Pics for example :

Before click and just after the click, during the transition :

http://www.morgann-c.com/tools/js/bug.jpgenter image description here

Explanations :

I tested many possibility to clean that but no solution at this time. In the script (responsiveslides.js) the transition's are reduction by the opacity. At the line 71 of the script there's the configuration of the opacity : 

visible = {"float": "left", "position": "relative", "opacity": 1, "zIndex": 2},
hidden = {"float": "none", "position": "absolute", "opacity": 0, "zIndex": 1, }

If I change the opacity of the hidden class to 0 there's no transition but the bug disappears ! I think this is a problem with the CSS's opacity transition. If I delete the rotate on all the div's the bug also disappears. I tested all the CSS transform but no result ...

I'm working on this bug for 3 days and it's very important for me to find a solution quickly ... I implore you, if someone has already had this problem i take !

Have a good week end and thank you by advance ...

EDIT //// :

Firefox 30 : "Blur" on click
Chrome 35.0.1916.153 : "Blur" everywhere on page load
IE 11 : No problems, no "blur", everything works perfectly !

Morgann C
  • 1
  • 1
  • I have not yet tested, not the time ! For the property backface-visibility, it was a mistake of my part. So, the problem is related to the css transition. On another page of my website i have an isotop grid in rotate div and the blur is also. Another exemple with a google map in the same rotate div. With only the map the window is clear but if i add a simple marker, the window becomes blur. I will test with the W3c example number 4 (http://www.w3.org/TR/css-transforms-1/). I would put a version of the online site tonight. – Morgann C Jun 16 '14 at 13:13
  • EDIT // If I disable hardware acceleration in firefox all the problems disappear. – Morgann C Jun 16 '14 at 13:17
  • For the first time in my life i can say "i love IE11" ... it work on, no blur no prob. Any idea to disabled the GPU render on chrome and ff ? I think it's that – Morgann C Jun 16 '14 at 13:31

1 Answers1

0

First off, you were missing a - in -ms-transform (this is likely the reason why there is no blur in IE - it wasn't using transform)

Secondly, removing -webkit-backface-visibility made it so Chrome only blurs on the transition (I have no idea why you added it given nothing rotates at all).

Thirdly unless you're serving IE8- or something like that you don't need filter for the rotation and -o-transform and -moz-transform are not needed, so remove them

Lastly, the reason why it's blurry is because it's being rendered by the GPU. Though this does always happen when things are generated by the GPU, but I'm thinking that it is simply being overworked by the fact that there are two rotations and in addition to the opacity transition.

Thus, as a solution you have a few options. You can either remove the opacity transition, opting for something like margin-left:-600px (this requires changing the plugin to suit), you could move the header and paragraph outside of <div id="global"> but position it so that it's in the same position as it currently is (making sure none goes outside of the rotated square), or, my personal favorite choose another plugin! The one you're using is quite outdated and there are a lot better free ones just one Google search away

Zach Saucier
  • 24,871
  • 12
  • 85
  • 147