jQuery移动面板打破了css位置：固定在autodivider链接栏中

Question

我正在尝试在同一页面上使用jQuery移动面板，其中jQuery移动autodivider链接栏具有css位置：fixed。 （参见下面的小提琴链接。）

在Chrome（和iOS Safari）中，当存在面板div（“＃definePanel”）时，linkbar div（“#sorter”）会丢失其固定位置并随页面滚动。在Firefox中，链接栏按预期固定在窗口右侧。

如果我删除了JQM面板div：

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

...链接栏的位置：已修复在Chrome中按预期工作。谁能告诉我们这里的问题是什么？

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

Answer 1

由于JQM在您的网页内容周围添加了一个巨大的div包装器（类position:fixed），我发现添加一个面板会导致.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

*）好吧，它确实有时......但不是真的： - ）。