RadDock problem with fixed position on Android devices

[René]

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?

[Slav]

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

 

 

[René]

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

[Slav]

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