jQuery подвижная панель breaks позиция css: исправлена ​​в строке автообнаружения

Question

Я пытаюсь использовать мобильную панель jQuery на той же странице с помощью ссылки jQuery mobile autodivider, которая имеет фиксированную позицию css. (См. Ссылку на скрипку ниже.)

В Chrome (и iOS Safari), когда присутствует панель div («#defPanel»), div div («#sorter») теряет фиксированное позиционирование и прокручивает страницу , В Firefox ссылка на канал остается фиксированной справа от окна, как и ожидалось.

Если удалить JQM панель DIV:

<div data-role="panel" id="defPanel">...</div> 

... в LinkBar ПОЗИЦИИ: фиксированные работы, как ожидается, в Chrome. Кто-нибудь может сказать, в чем проблема?

jsFiddle: http://jsfiddle.net/FC6WG/1/

Answer 1

я обнаружил, что добавление панели путает position:fixed, а также из-за JQM добавления в гигантском сНе обертке (с классом .ui-panel-content-wrap) вокруг содержания страницы с:

-webkit-backface-visibility: hidden; 
-webkit-transform: translate3d(0,0,0); 

Переопределения, что с:

-webkit-backface-visibility: visible; 
-webkit-transform: none; 

позволяет фиксированному контенту работать правильно. Не уверен, что это что-то не так, но это сделало трюк для меня!

Answer 2

position:fixed не работает в мобильных браузерах *. JQM использует некоторые более или менее разумные хаки, чтобы попытаться зафиксировать элементы. Общее правило - избегайте исправления чего-либо, если можете, если вы хотите перейти на мобильный. Если вы используете JQM, используйте data-position="fixed".

Смотрите некоторые статьи о фиксации (и избегать его ;-)):

• http://bradfrostweb.com/blog/mobile/fixed-position/
• http://view.jquerymobile.com/master/docs/widgets/headers/bars-fixed.php

*) Ну хорошо, это делает иногда ... но на самом деле не: -).