Nasty kleinen Bug, dieses.Android Webkit: Absolut positionierte Elemente nicht respektieren Z-Index
Wie in Android ticket 6721 dargestellt, scheint der Android-Browser den Z-Index nicht zu respektieren, wenn absolut positionierte Elemente über die <a> oder <input> Tags gelegt werden. Ich bin verzweifelt für jede Art von Workaround. Hat jemand diesen schon einmal besiegt?
Vielen Dank im Voraus!
Dieses Problem bezieht sich wahrscheinlich auf Steuerelemente und ihre Besonderheit für den Browser. Bei der Betrachtung Ihres Problems (in Chrom) habe ich ein ähnliches Problem festgestellt, dass Sie, wenn Sie die Tabulatortaste drücken, immer noch in der Lage sind, die Eingabeelemente zu fokussieren. Wahrscheinlich willst du das auch nicht (unabhängig von blutthrough). Die Lösung ist überraschend einfach, schreiben Sie Ihr Skript, um das disabled Attribut zu allen Eingabe/Schaltfläche/etc hinzuzufügen. Elemente, die überlagert sind. Eine deaktivierte Eingabe wird not be able to receive Fokus (per Tastatur oder sonst), und klicken Sie darauf sollte nicht möglich sein.
Da dies auch dumme Tastaturumrundung deaktiviert, ist es nicht einmal eine Problemumgehung, sondern ein besseres Design, das auch mit der tastaturbasierten Navigation wie erwartet funktioniert.
Dies hilft für Elemente, aber das Problem passiert immer noch mit Elemente, die leider ein größeres Problem Kind sind. Irgendwelche Ideen dafür? –
Nun, Sie könnten immer die betroffenen
Guter Gedanke, aber das tötet die Erfahrung für alte Blackberry-Benutzer (Capitol Hill Publikum, also viele von ihnen), es sei denn, Sie tun alles mit JavaScript, das ist eine echte Steuer auf Geräte mit begrenzter Rechenleistung. Ich werde dir die Belohnung für die Mühe geben - danke! –
IE hat das gleiche Problem und die Lösung besteht darin, sicherzustellen, dass jedes Element, das an der Positionierung beteiligt ist und sogar ihre Container einen Z-Index auf sie angewendet haben. Grundsätzlich, wenn Sie einen Z-Index zu 1 Element in der Dom hinzufügen, dann versteht IE seine Z-Position verstehen, aber nicht verstehen, seine Z-Position relativ zu dem, was es neben und/oder über.
Behälter - z-index 0
Kind (oben Container) - z-index 1
Kind 2 (vor allem) - z-index 999
Natürlich ist dies alles auf dumme IE basiert aber es ist einen Versuch in android auch wert.
zweiten Versuch :)
Ich bin nicht mit dem Android-Browser vertraut überhaupt, aber ich hoffe, vielleicht haben Sie führen auf einen Weg um Ihr Problem zu lösen. Superfish ist ein JavaScript-Menü, das eine Lösung für Z-Index-Menüelemente implementiert hat, wenn diese über ausgewählte Felder in Browsern angezeigt werden. BgIframe ist die js, die sie verwenden, um dies zu erreichen. Ihre Antwort könnte hoffentlich dort liegen.
Es ist ein bisschen anders als das IE-Problem; In IE werden die Elemente tatsächlich nicht gemäß der Spezifikation angezeigt. In Android Webkit sind sie, aber die Trefferbereiche für und Elemente sind nicht korrekt.Danke für den Gedanken! –
Simulieren INPUT und A mit DIVs.
Letzte Korrekturen für dieses Problem für IE gehören, aber sind wahrscheinlich nicht auf die folgende Liste beschränkt. Diese können helfen, das Problem in Android für Sie zu lösen.
Setzen Sie einen Iframe hinter den absoluten Inhalt. Die iframe können diese Elemente verdunkeln Sie
Wenn Sie Ihre absolute Inhalte anzuzeigen, verbergen alle Problem Elemente mit JavaScript
Definieren Sie die divs in umgekehrter Reihenfolge
Punktnummer 1 gilt als die zuverlässigste Lösung für IE, aber möglicherweise nicht die beste Lösung für Sie.
Um die Frage richtig zu beantworten, ist es wichtig, die Bug-Seite zu lesen. Das Problem besteht nicht in der Sichtbarkeit der Eingabe darunter, sondern in der "Klickbarkeit".
ich es nicht testen können, aber diese sind mögliche Abhilfen:
absolute Positionierung vergessen und setzen nur zwei divs dort und Sichtbarkeit umschalten.
Wenn dies nicht Sie nicht erfüllt ...
versuchen CSS Position auf absolute oder relative Einstellung für alle a und input Tags (Yup, das könnte Sie zwingen CSS neu zu schreiben, um das Layout zu halten, aber ist es nicht wert)
einen <a> -tag Behälter machen:
<div style="z-index:100 etc."><a style="width: 100%; height:100%; z-index:101">
stuff here
</a></div>
Dies benötigt etwas mehr CSS, damit der Inhalt gut aussieht. Aber ich erwarte, dass so etwas das Problem lösen würde.
wenn 1 und 2 sind nicht zu helfen ihnen beide auf einmal versuchen;)
wenn es passiert immer noch Sie können in Details überprüfen möchten, was passiert, wenn Sie klicken. Binden Sie Click- und Mousedown-Ereignisse an: link on top, container on top, input in the bottom und protokollieren Sie sie. Wenn Sie eines dieser Ereignisse für den oberen Link erhalten, können Sie versuchen, das Blubbern zu einem bestimmten Zeitpunkt zu stoppen oder das Ereignis an der Eingabe unten zu verhindern.
Das wäre schwierig, aber ich kann ein wenig helfen. jQuery wäre sehr notwendig.
Ok, +1000 (ist das möglich?) Zog mir die Haare aus. Den Z-Index jedes Elements mit CSS zu setzen (musste sowohl Elemente als auch alle Container bearbeiten), reparierte es für mich. Danke für den Tipp. Dank dir habe ich die Glatze für einen weiteren Tag abgewehrt. – techdude
Setzen Sie die unter HTML in ein Div und setzen Sie die Anzeige: keine Verwendung von Javascript, so dass die unter Inhalt ist weg, anstatt klickbar und modal.
Wenn Sie dieses Problem lösen möchten, müssen Sie zunächst Z-Index zum übergeordneten Wrapper hinzufügen und Z-Index zu Ihren anderen Elementen klar hinzufügen, Lösung ist, dass alle Elemente einen Nullpunkt für den Verständnis Z-Index haben Eigenschaft korrekt
dies jedes Element mit dem CSS hinzufügen, die ein Problem verursacht:
-webkit-backface-visibility: hidden;
Es würde helfen, um zu sehen, eine Probe Ihres Code, wo Sie uns absolut positionierten Elemente oben und Tags anzeigen. – Sotkra
Ich habe Paul de Vrieze das Kopfgeld gegeben, aber das Problem ist nicht wirklich gelöst worden. Wenn jemand andere Gedanken hat, würde ich sie gerne hören! –
Versuchte Mine? Ich sehe keine Kommentare von Ihnen. – naugtur