This is a migrated thread and some comments may be shown as answers.

RadDock problem with fixed position on Android devices

3 Answers 15 Views
Dock
This is a migrated thread and some comments may be shown as answers.
René
Top achievements
Rank 2
René asked on 05 Nov 2014, 07:56 PM
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?






3 Answers, 1 is accepted

Sort by
0
Slav
Telerik team
answered on 10 Nov 2014, 04:55 PM
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.

 
0
René
Top achievements
Rank 2
answered on 10 Nov 2014, 06:59 PM
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
0
Slav
Telerik team
answered on 13 Nov 2014, 04:39 PM
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.

 
Tags
Dock
Asked by
René
Top achievements
Rank 2
Answers by
Slav
Telerik team
René
Top achievements
Rank 2
Share this question
or