Divs mit Z-Index überlagern: Problem auf Smartphone-Browsern

html.de-Forum HTML, XHTML & CSS
1

Hi!

Ich bin gerade dabei, eine Webseite für Smartphones zu entwerfen.
In bestimmten Situationen soll ein Div über die Webseite gelegt werden, welches den eigentlichen Inhalt überlagert. (Das brauche ich für individuell designte Alert-Meldungen und ähnliches.) Mit z-Index ist das ja auch weiter kein Problem: Man kann Links in diesem Div anklicken, Felder ausfüllen und so weiter.
Das einzig blöde daran ist die Tatsache, dass Links, die sich auf der ursprünglichen Seite befinden, und durch das Div überlagert wurden, im mobilen Browser noch immer anklickbar sind - auch wenn sie nicht mehr zur Ziel-URL weiterleiten, kann man beim draufklicken immer noch erkennen, dass an der Stelle ein Link versteckt ist. Ausserdem werden diese Links noch als solche erkannt, wenn ich mit der alternativen Maus, die es auf vielen Smartphones gibt, durch die einzelnen Elemente auf der Webseite durchnavigiere.
Hat da jemand eine Idee, wie man dieses Problem lösen könnte?

So schaut meine Testseite momentan aus:

<html><head>
<title>Z Index Test</title>
<style type="text/css"><!--
 .examplediv
 {
  border-style:solid #000000 1px;
 }
#divid1 {
    position:absolute;
    left:450px; top:350px; width:300px; height:150px;
    z-index:1;
    background-color: #000000;
    color: #00FF00;
    opacity: 1;
}
#divid2 {
    position:absolute;
    left:450px; top:350px; width:300px; height:150px;
    background-color:#000000;
    z-index:0;
    color: #00FF00;
}
// --></style>
</head>
<body>

  <div id="divid1" class="examplediv">
  div1
  </div>

  <div id="divid2" class="examplediv">
  das div <a href="http://www.orf.at">div2</a>
  </div>
</body>
</html>
2

Ein z-index von 0 ist manchmal problematisch. Bei welchem Smartphones tritt das auf? Welcher Browser wird dort verwendet?

3

Ich verwende ein HTC Desire und den Standard Android Browser bzw den Dolphin HD.
Leider bringts auch nichts, wenn ich den Z-Index auf von 0 auf 1 hochsetze…

4

Hab sowas leider nicht da um es zu testen. Schau mal nach, auf welcher Basis der Browser läuft (Webkit, Gecko, Trident oder anderes). Je nachdem müsstest Du dieses Verhalten auch auf einem Desktop-Browser simulieren können.

5

Der Android Standard Browser arbeitet auf WebKit-Basis.

Ich hab jetzt noch versucht, einen Link über den gesamten Inhalt meines überlagernden Divs zu legen, der nirgends hinführt. Ich dachte mir, dass ich damit dieses Problem austricksen könnte. Leider erkennt mein Smartphone immer noch, dass darunter andere Links versteckt sind, und zeigt diese beim Draufklicken (und beim Verwenden der optischen Maus) an - auch wenn er dann die Ziel-URL des darüber liegenden Links verwendet.

6 
-webkit-user-select: ignore;

Könne evtl. helfen. Ansonsten mal selbst nach Webkit-Spezifischen Selektoren gucken oder gleich JavaScript nehmen um auf onclick/onfocus zu reagieren auf alle document.links.

7

Die CSS Zeile hat leider auch nichts gebracht…
Mit onFocus hab ichs auch schon probiert; allerdings bekommt das Element anscheinend nicht den Focus, wenn man mit der optischen Maus drüberfährt. (auf onMouseOver reagiert er allerdings genauso wenig; das dürft was ganz spezielles sein…)

Ich hab jetzt mal eine Zwischenlösung gefunden, bei der ich das Highlighten in Webkit-Browsern komplett deaktiviere - leider auch in den Divs, die im Vordergrund liegen: (was ich eigentlich nicht unbedingt will.)
-webkit-tap-highlight-color:rgba(0,0,0,0);