listview - jQuery 移动面板打破 css 位置：在自动分隔链接栏中修复

Question

我正在尝试在同一页面上使用 jQuery 移动面板和具有 css 位置的 jQuery 移动自动分隔器链接栏：固定。（见下面的小提琴链接。）

在 Chrome（和 iOS Safari）中，当面板 div ("#defPanel") 存在时，链接栏 div ("#sorter") 会失去其固定位置并随页面滚动。在 Firefox 中，链接栏按预期固定在窗口的右侧。

如果我删除 JQM 面板 div：

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

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

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

Answer 1

我发现添加面板position:fixed也很麻烦，因为 JQM 在.ui-panel-content-wrap页面内容周围添加了一个巨大的 div 包装器（带有 class ）：

-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

*）好吧，它有时会......但不是真的:-)。