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:
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?
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: rotate
3
d(
0
,
0
,
1
,
0
);
-webkit-backface-
visibility
:
hidden
;
-webkit-perspective:
1000
;
-moz-transform: rotate
3
d(
0
,
0
,
1
,
0
);
-moz-backface-
visibility
:
hidden
;
-moz-perspective:
1000
;
-o-transform: rotate
3
d(
0
,
0
,
1
,
0
);
-o-backface-
visibility
:
hidden
;
-o-perspective:
1000
;
-ie-transform: rotate
3
d(
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?