FX Flip Horizontal perspective issue when not in IE10

5 posts, 1 answers
  1. PaulH
    PaulH avatar
    70 posts
    Member since:
    Mar 2011

    Posted 11 Nov 2013 Link to this post

    I have a page with a large div (set to 60% of the screen width) in it that I wish to flip horizontally to display the other side. I've used your documentation and demos to set up what I want using fx.flipHorizontal and it displays and flips perfectly in IE10. However, in Chrome and Firefox, the animation of the flip takes the edge of the div outside the bounds of the screen causing a scrollbar to temporarily appear and then disappear making the display look poor. I have setup a second page not using Kendo but using the standard CSS3 transforms and I can get those to work properly in FireFox and Chrome by adding a "perspective" to the container - 3000px solves the problem consistently in this case. This causes a problem with IE10 unfortunately where the back side of the panel is displayed immediately the flip animation is started and at present that does not appear to be fixable as far as I can see. Is there a way to control the perspective on the Kendo FX flip so I can resort to using it to support all browsers or is there something else I can do to make the flip display correctly in FF & Chrome?

    I am running on a screen in full HD resolution, I have a left margin on my div of 68px and the div itself is 1142px wide. The height of the div is about 500px. I hope that helps you to reproduce my scenario.

    Thanks in advance.
  2. Answer
    Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 13 Nov 2013 Link to this post

    Hi Paul,

    The perspective of the flip effect is not configurable, currently. A simple workaround which I can suggest is to set the BODY/HTML elements CSS overflow to hidden during the transition.

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. PaulH
    PaulH avatar
    70 posts
    Member since:
    Mar 2011

    Posted 14 Nov 2013 Link to this post

    While setting the overflow clearly will resolve the issue of the rotation making a scrollbar appear it does of course mean that we then have an issue if we want scrolling content in the page itself. I've played with various combinations but I can't establish a suitable resolution. Any other ideas?
  4. Petyo
    Admin
    Petyo avatar
    2444 posts

    Posted 18 Nov 2013 Link to this post

    Hi Paul,

    My suggestion was to temporarily set the overflow value, and then restore it back after the transition is over. 

    Regards,
    Petyo
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. PaulH
    PaulH avatar
    70 posts
    Member since:
    Mar 2011

    Posted 18 Nov 2013 Link to this post

    Sorry, I'd missed your comment about setting it "during" the transition. I've done it now and that works fine.

    Thanks
Back to Top