RadDock problem with fixed position on Android devices

4 posts, 0 answers
  1. Raptor
    Raptor avatar
    19 posts
    Member since:
    Aug 2011

    Posted 05 Nov 2014 Link to this post

    Hello,

    I found something strange and I need help.

    I'm using Docks on page as component containers. Whole web is using Bootstrap framework. Now I have a page with full screen Dock and inside is used fixed navbar from Bootstrap (http://getbootstrap.com/components/#navbar-fixed-top). All seems to be ok. On small devices navbar collapses, page scrolls and navbar is fixed on top of page.

    But not on Android devices and iPhone. Fixed position is not working and scrolling in page scrolls navbar.

    I found, that it happens because of RadDock styles:

    .RadDock {
     /* improves drag&drop in mobile browsers */
     -webkit-transform: rotate3d(0, 0, 1, 0);
     -webkit-backface-visibility: hidden;
     -webkit-perspective: 1000;
     -moz-transform: rotate3d(0, 0, 1, 0);
     -moz-backface-visibility: hidden;
     -moz-perspective: 1000;
     -o-transform: rotate3d(0, 0, 1, 0);
     -o-backface-visibility: hidden;
     -o-perspective: 1000;
     -ie-transform: rotate3d(0, 0, 1, 0);
     -ie-backface-visibility: hidden;
     -ie-perspective: 1000;
    }

    Problem is in -webkit-transform and -webkit-backface-visibility. I know it is some kind of fix for Android devices and fixed position, but if I remember, it should be placed only to fixed element, or not?

    Check attached project:
    http://raptor.cestiny.cz/Temp/TelerikBootstrapTest.rar

    Simply run included page on Android device or in Chrome developer tools. See this picture for "config":
    http://raptor.cestiny.cz/Temp/raddock.jpg

    Selecting mode to any Android device (Nexus, iPhone, ...) will lead to not working fixed position. Non-android devices (Windows Phone, ...) works fine.

    Any idea what to do?






  2. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 10 Nov 2014 Link to this post

    Hello,

    These CSS styles were added in order to improve the drag and drop functionality of RadDock in mobile browsers. If they are conflicting with the styles of Bootstrap you can apply the following script on your page to disable the hardware acceleration properties:
    <script type="text/javascript">
        var oldInit = Telerik.Web.UI.RadDock.prototype.initialize;
        Telerik.Web.UI.RadDock.prototype.initialize = function () {
            oldInit.call(this);
            if (!$telerik.isSafari)
                $telerik.$(this._element).css({ transform: "none", backfaceVisibility: "visible", perspective: "none" });
            else
                $telerik.$(this._element).css("-webkit-transform", "none").css("-webkit-backfaceVisibility", "visible").css("-webkit-perspective", "none");
        }
    </script>

    Regards,
    Slav
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Raptor
    Raptor avatar
    19 posts
    Member since:
    Aug 2011

    Posted 10 Nov 2014 in reply to Slav Link to this post

    Hello,

    yes, I can easy fix it for example with CSS override. It is not problem. And problem is not only with bootstrap. There is global problem with fixed positioning on Android. Simply no fixed element in RadDock works in Android. You can test it on your own. And all I can say is that this is mayor bug for me. With this CSS you broke positioning in RadDock and it should be fixed.

    Regards
    Rene
  5. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 13 Nov 2014 Link to this post

    Hello,

    According to the results of the following search, there are problems with the combination of the transform rendering model and elements with fixed position in some browsers: https://www.google.com/search?q=problem+with+fixed+position+and+transform. It appears that the issue at hand is not related to the way RadDock implements this functionality, but the way browsers interpret the transform CSS property, which is not in our control.

    In addition, the purpose of setting fixed positioning is to have elements that need to appears fixed on the screen. Docks are usually used to change the position of content in a page thus using a fixed element in a dock is not a common scenario.

    Regards,
    Slav
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top