Kit Web Android:Elementos absolutamente posicionados não respeitam o índice z

StackOverflow https://stackoverflow.com/questions/2562206

Pergunta

Bichinho nojento, esse aqui.

Como ilustrado em Bilhete Android 6721, o navegador Android parece não respeitar o índice z quando elementos posicionados de forma absoluta são colocados sobre o topo de <a> ou <input> Tag.Estou desesperado por qualquer tipo de solução alternativa.Alguém já conquistou esse antes?

Desde já, obrigado!

Foi útil?

Solução

Este problema provavelmente está relacionado aos controles e por serem especiais para o navegador.Ao analisar o seu problema (no cromo), encontrei um problema relacionado: quando você pressiona a tecla Tab, ainda será capaz de focar os elementos de entrada.Você provavelmente também não quer isso (independentemente do sangramento).A solução é surpreendentemente simples, você escreve seu script para adicionar o disabled atributo para todas as entradas/botões/etc.elementos que estão sobrepostos.Uma entrada desabilitada não poder receber foco (pelo teclado ou outro) e clicar nele deve ser impossível.

Como isso também desativa a circunavegação boba do teclado, não é nem uma solução alternativa, mas um design melhor que também funciona com a navegação baseada no teclado, conforme esperado.

Outras dicas

Para responder à pergunta corretamente, é importante ler a página de bug. O problema não se trata de visibilidade da entrada abaixo, mas de sua "habilidade de cliques".

Não posso testá -lo, mas essas são possíveis soluções alternativas:

0 Esqueça o posicionamento absoluto e basta colocar duas divs lá e alternar a visibilidade.

Se isso não o satisfaz ...

1 tente definir a posição CSS para absoluto ou parente para todos a e input Tags (sim, isso pode forçá -lo a reescrever o CSS para manter o layout, mas não vale a pena?)

2 fazer um <a>-tag contêiner:

 <div style="z-index:100 etc."><a style="width: 100%; height:100%; z-index:101">
     stuff here
 </a></div>

Isso precisará de mais CSS para fazer com que o conteúdo pareça bem. Mas espero que algo assim resolva o problema.

Se 1 e 2 não estão ajudando a experimentá -los Ambas de uma vez só ;)

3 Se ainda acontecer, você pode querer verificar os detalhes o que acontece quando clicar. Eventos de clique e mousedown de ligação para: link on top, container on top, input in the bottom e registre -os. Se você receber algum desses eventos para o link superior, poderá parar a borbulha em algum momento ou impedir o evento na entrada na parte inferior.

Isso seria difícil, mas eu posso ajudar um pouco. JQuery seria bastante necessário.

As correções anteriores para esse problema no IE incluem, mas provavelmente não estão limitadas à lista a seguir.Isso pode ajudar a resolver o problema do Android para você.

  1. Coloque um iframe atrás do conteúdo absoluto.O iframe pode ocultar esses elementos para você

  2. Ao exibir seu conteúdo absoluto, oculte todos os elementos do problema com JavaScript

  3. Defina as div's na ordem inversa

O ponto número 1 é considerado a solução mais confiável para o IE, mas pode não ser a melhor solução para você.

Adicione isso ao CSS de todos os elementos que criam um problema:

 -webkit-backface-visibility: hidden;

Simule INPUT e A com DIVs.

[PSEUDO JQUERY CODE]

<div href="http://google.com" rel="a">Link</div>

<div class="field">
    <div></div>
    <input type="text" style="display: none" />
</div>

<script>
    $('div[rel=a]).click(function() {
        location.href = $(this).attr('href');
    });
    $('.field > div').click(function() {
        $(this).hide();
        $('.field > input').show();
    });
    $('.field > input').blur(function() {
        $(this).hide();
        $('.field > div').html($(this).val()).show();
    });
</script>

O IE tem o mesmo problema e a solução existe para garantir que todos os elementos envolvidos no posicionamento e até seus contêineres tenham um índice Z aplicado a eles. Basicamente, se você adicionar um índice z ao 1 elemento no DOM, o IE entende sua posição z, mas não entende sua posição z em relação ao que é o próximo e/ou o mais.

Container - Z -Index 0
Criança (no topo do recipiente) - Z -Index 1
Criança 2 (acima de tudo) - Z -Index 999

É claro que tudo isso é baseado no IE estúpido, mas vale a pena tentar no Android também.

Segunda tentativa :)

Não estou familiarizado com o navegador Android, mas espero talvez levá -lo a um caminho para resolver seu problema. O Superfish é um menu JavaScript que implementou uma solução para itens de menu Z-Index quando eles caem sobre caixas selecionadas em navegadores. O BGIFRAME é o JS que eles usam para conseguir isso. Sua resposta pode estar lá, esperançosamente.

http://users.tpg.com.au/j_birch/plugins/superfish/#sample2

Coloque o HTML em uma div e defina a tela: nenhum usando JavaScript; portanto, o conteúdo abaixo se foi, em vez de ser clicável e modal.

se você quiser resolver este problema, primeiro de tudo você deve adicionar o índice z ao wrapper pai e adicionar claramente o índice z aos seus outros elementos, a solução é que todos os elementos terão um ponto zero para entender a propriedade do índice z corretamente

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top