quebra de painel móvel jQuery css posição: fixo em autodivider linkbar - listview, jquery-mobile, painel, css-position

Eu estou tentando usar um painel móvel do jQuery na mesma página com uma barra de links do jQuery mobile que possui a posição css: fixa. (Veja o link abaixo).

No Chrome (e iOS Safari), quando o painel div("#defPanel") está presente, a barra de links div ("#sorter") perde seu posicionamento fixo e rola com a página. No Firefox, a barra de links permanece fixa à direita da janela, conforme o esperado.

Se eu remover a div do painel JQM:

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

... a posição da barra de links: fixa funciona como esperado no Chrome. Alguém pode dizer qual é o problema aqui?

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

Respostas:

Descobri que adicionar um painel atrapalha position:fixed também, devido ao JQM adicionar um invólucro div gigante (com classe .ui-panel-content-wrap) em torno do conteúdo da sua página com:

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

Substituindo isso por:

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

permite que o conteúdo fixo funcione corretamente. Não tenho certeza se isso atrapalha algo mais inadvertidamente, mas isso fez o truque para mim!

o position:fixed não funciona em navegadores móveis *. O JQM usa alguns hacks mais ou menos sãos para tentar consertar elementos. Uma regra geral - evite consertar qualquer coisa, se puder, se quiser se tornar móvel. Se você usa o JQM, use data-position="fixed".

Veja alguns artigos sobre como corrigir (e evitá-lo ;-)):

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

*) Bem, ok, às vezes acontece ... mas na verdade não :-).