Como resolver o bug de sobreposição de seleção no IE6?
-
08-06-2019 - |
Pergunta
Ao usar o IE, você não pode colocar um div posicionado de forma absoluta sobre um elemento de entrada selecionado.Isso ocorre porque o elemento select é considerado um objeto ActiveX e está acima de todos os elementos HTML da página.
Já vi pessoas escondendo seleções ao abrir uma div pop-up, o que leva a uma experiência muito ruim do usuário com o desaparecimento dos controles.
Na verdade, o FogBugz tinha uma solução bastante inteligente (antes da v6) de transformar cada seleção em caixas de texto quando um popup era exibido.Isso resolveu o bug e enganou a visão do usuário, mas o comportamento não era perfeito.
Outra solução está no FogBugz 6 onde eles não usam mais o elemento select e o recodificam em todos os lugares.
A última solução que uso atualmente é bagunçar o mecanismo de renderização do IE e forçá-lo a renderizar o posicionado absolutamente <div>
também como um elemento ActiveX, garantindo que ele possa residir em um elemento selecionado.Isto é conseguido colocando um invisível <iframe>
dentro de <div>
e estilizando-o com:
#MyDiv iframe
{
position: absolute;
z-index: -1;
filter: mask();
border: 0;
margin: 0;
padding: 0;
top: 0;
left: 0;
width: 9999px;
height: 9999px;
overflow: hidden;
}
Alguém tem uma solução ainda melhor que esta?
EDITAR:O objetivo desta pergunta é tão informativo quanto uma questão real.eu acho o <iframe>
truque para ser uma boa solução, mas ainda estou procurando melhorias como remover isso etiqueta feia e inútil que degrada a acessibilidade.
Solução
Não conheço nada melhor que um Iframe
Mas me ocorreu que isso poderia ser adicionado em JS procurando algumas variáveis
- Ou seja, 6
- Um índice Z alto (você tende a ter que definir um índice z se estiver flutuando em um div)
- Um elemento de caixa
Então, um script que procure esses itens e apenas adicione uma camada iframe seria uma boa solução
Paulo
Outras dicas
Obrigado pela solução de hack de iframe.É feio e ainda assim elegante.:)
Apenas um comentário.Se acontecer de você estar executando seu site via SSL, a tag iframe fictícia precisa ter um src especificado, caso contrário, o IE6 irá reclamar com um aviso de segurança.
exemplo:
<iframe src="javascript:false;"></iframe>
Já vi algumas pessoas recomendarem definir src como blank.html...mas gosto mais do javascript.Vai saber.
Pelo que eu sei, existem apenas duas opções, a melhor delas é o mencionado uso de um iframe.O outro está ocultando todas as seleções quando a sobreposição é mostrada, levando a uma experiência de usuário ainda mais estranha.
experimente este plugin http://docs.jquery.com/Plugins/bgiframe , deve funcionar!
uso: $('.your-dropdown-menu').bgiframe();
Eu não acho que exista.Tentei resolver esse problema no meu trabalho.Ocultar o controle de seleção foi o melhor que conseguimos (sendo uma loja corporativa com um público cativo, a experiência do usuário geralmente não é levada em consideração nas decisões do PM).
Pelo que pude reunir on-line ao procurar uma solução, simplesmente não há uma boa solução para isso.Gosto da solução FogBugz (a mesma coisa feita por muitos sites importantes, como o Facebook), e é isso que uso em meus próprios projetos.
Eu faço a mesma coisa com caixas de seleção e Flash.
Ao usar uma sobreposição, oculte os objetos subjacentes que passariam.Não é ótimo, mas funciona.Você pode usar JavaScript para ocultar os elementos antes de exibir uma sobreposição e mostrá-los novamente quando terminar.
Tento não mexer com iframes, a menos que seja absolutamente necessário.
O truque de usar rótulos ou caixas de texto em vez de caixas de seleção durante as sobreposições é interessante.Posso usar isso no futuro.
Mootools tem uma solução muito bem definida usando um iframe, chamado iframeshim.
Não vale a pena incluir a lib só para isso, mas se você tiver ela em seu projeto de qualquer maneira, você deve estar ciente de que o plugin 'iframeshim' existe.
Existe um plugin jquery simples e direto chamado bgiframe.O desenvolvedor o criou com o único propósito de resolver esse problema no IE6.
Usei recentemente e funciona perfeitamente.
Ao ocultar os elementos selecionados, oculte-os configurando a opção "visibility:oculto" em vez de exibir:nenhum, caso contrário o navegador irá refluir o documento.
Corrigi isso ocultando os componentes selecionados usando CSS quando uma caixa de diálogo ou sobreposição era exibida:
selects[i].style.visibility = "oculto";
function showOverlay() {
el = document.getElementById("overlay");
el.style.visibility = "visible";
selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) {
selects[i].style.visibility = "hidden";
}
}
function hideOverlay() {
el = document.getElementById("overlay");
el.style.visibility = "hidden";
var selects = document.getElementsByTagName("select");
for (var i = 0; i < selects.length; i++) {
selects[i].style.visibility = "visible";
}
}