iOS CSS opacity + Sichtbarkeit übergang

Werfen Sie einen Blick auf den folgenden test in einem desktop-browser (JSFiddle):

CSS:

a {
  background: gray;
  display: block;
  margin: 100px;
  padding: 100px;
}
a span {
  opacity: 0;
  -webkit-transition: 0.5s;
  visibility: hidden;
}
a:hover span {
  opacity: 1;
  -webkit-transition: 0.5s;
  visibility: visible;
}

HTML:

<a href="#">a <span>span</span></a>

Sie den Mauszeiger über das anchor-element und das span-element abläuft, wie es sollte.

Nun über ein iOS-Gerät.
Ergebnis: es tut sich nix.

Fakten:

  • Wenn die transition-Eigenschaft ist nicht vorhanden, es funktioniert.
  • Wenn entweder die Deckkraft oder die visibility-Eigenschaft ist nicht vorhanden, es funktioniert.
  • Es gibt keine webkitTransitionEnd Ereignis ausgelöst wird für die Deckkraft oder die Eigenschaft Sichtbarkeit.

Gibt es Abhilfe?

  • Haben Sie sich Gedanken über die fehlenden Zeiger auf einem iOS-Gerät? Es ist kein schweben.
  • Tatsächlich da ist. Test (mit der visibility-Eigenschaft fehlen): jsfiddle.net/jrpSJ/1
  • Während nicht ein wahrer hover -, klicken Sie annimmt und löst css:hover auf iOS-Geräten.
  • webarnes.ca/2012/04/mobile-safari-bugs-so-far - scheint ein Fehler zu sein.
  • Hallo @Dan, können Sie eine Referenz für diese Behauptung? Ich hab mich schon lang gefragt, über die Verwendung von CSS:hover auf iOS. Und was ist mit Android? danke!
  • keine Referenz, nur aus persönlichen tests, obwohl die hover-off ist nie ausgelöst und es ist irgendwie unstabil.. man kann google für einige Artikel niteodesign.com/web-design/...
  • ich habe bemerkt, auf meinem iPhone, die hover-off ist ein Schmerz, klicken schwer die meisten mal. danke für den link, ich denke, ich werde nur stick mit click() so viel wie möglich.
  • Das gleiche problem tritt bei hinzufügen/entfernen einer Klasse, es ist also nicht nur a :hover Problem.

InformationsquelleAutor DADU | 2011-09-25
  1. 8

    Nur die Deckkraft auf den übergang saugt.

    Da, dass auf dem iPhone müssen Sie Tippen, um zu konzentrieren, ein element das ist, wie ich schon behoben, mein problem:

    .mydiv {
        visibility:hidden;
        opacity: 0;
        transition: all 1s ease-out; 
        -webkit-transition: all 1s ease-out;
        -moz-transition: all 1s ease-out;
        -o-transition: all 1s ease-out;
}
.mydiv:hover {
            visibility:visible;
            opacity: 1;
}
.mydiv:active {
            -webkit-transition: opacity 1s ease-out;
}

    Habe ich die Deckkraft übergang zu :active.

    Diese Weise funktioniert es mit allen transition-animation (Bedenken Sie, dass Sie möchten, wenden Sie eine animation auf der Höhe oder etwas anderes) auf Chrome, Firefox und iPhone (vom Fass).

    Dank Grezzo und Michael Martin-Smucker für das Auffinden über die Deckkraft übergang.

    (copy/paste meiner Antwort von CSS animation-Sichtbarkeit: sichtbar; funktioniert auf Chrome und Safari, aber nicht auf iOS)

    • +1, das ist eine clevere Lösung, um diese hacky "Update" nur auf touch-Geräten.
    • Die Fehler (welche Auswirkungen iOS - ≤ 7) können behoben werden, durch angeben einer null-Dauer für die Sichtbarkeit übergang (+ richtige delay): state1=opacity: 1; visibility: visible; transition: opacity 1s, visibility 0s; - und state2=opacity: 0; visibility: hidden; transition: opacity 1s, visibility 0s 1s;
    InformationsquelleAutor Sergiu
  2. 11

    Mit einigen geringfügigen änderungen, um die transition Eigenschaft, dies funktioniert auf iOS. Auf :hover beschränken sich die transition nur die opacity - Eigenschaft, etwa so:

    a:hover span {
    opacity:1;
    -webkit-transition: opacity 0.5s;
    transition: opacity 0.5s;
    visibility:visible;
}​

    Während Sichtbarkeit ist eine Eigenschaft animiert werden, es scheint ein bug in der iOS-Umsetzung. Wenn Sie versuchen, um den übergang visibility, wie es scheint, den ganzen übergang nicht passieren. Wenn Sie einfach nur die Grenze des übergangs zu opacity, die Dinge so funktionieren, wie erwartet.

    Klar zu sein: Verlassen die visibility - Eigenschaft in der CSS, nur nicht versuchen, um den übergang, wenn Sie wollen, dass die Dinge zu arbeiten, die in Mobile Safari.

    Referenz, hier ist die aktualisierte fiddle, die ich getestet auf einem iPad:

    CSS:

    a {
  background: gray;
  display: block;
  margin: 100px;
  padding: 100px;
}
a span {
  opacity: 0;
  -webkit-transition: 0.5s;
  visibility: hidden;
}
a:hover span {
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  visibility: visible;
}

    HTML:

    <a href="#">a <span>span</span></a>

    • Die visibility-Eigenschaft ist wichtig für die Barrierefreiheit. Deckkraft visuell verbirgt das element, wo die Sicht auch versteckt es, für screen-Reader.
    • Richtig, ich bin nicht was darauf hindeutet, dass Sie loswerden visibility nur, dass Sie nicht versuchen, zu transition (was nicht möglich ist jedenfalls).
    • Sie sind ein Genie! Ich habe Ihre Lösung für ein ähnliches problem ich hatte: stackoverflow.com/questions/10736478/.... Ich habe meine Frage selbst beantwortet (und auf deine Antwort hier), aber ich bin mir nicht sicher, ob meine Erklärung, warum es funktioniert zu 100% korrekt ist, könnte Sie überprüfen Sie, und fügen Sie einen Kommentar oder schicken Sie uns eine alternative Antwort, wenn ich etwas falsch? Ich danke Ihnen so sehr.
    • Tatsächlich, die 'Sichtbarkeit' ist eine gültige animierbare property. Ich habe es verwendet, um zu helfen, einige übergänge mehr zugänglich. w3.org/TR/css3-transitions/#animatable-properties
    • danke, hab ich aktualisiert meine Antwort. Aus Neugier, gibt es eine Barrierefreiheit profitieren, um den übergang visibility (statt übergang nur opacity und einfach Umschalten visibility)?
    • In dem Umstand habe ich es in, ich war die überführung der Höhe. Und wenn Sie nicht den übergang von Sichtbarkeit, das element würde sofort verschwinden (ruinieren der übergang). Ich denke, die Deckkraft hat irgendeine Art von Magie zu verhindern. Seltsam. Demo hier: cbateman.com/blog/accessible-css-transitions
    • Thnx @MichaelMartin-Smucker, es funktioniert Super 🙂
    • Ich hatte ein ähnliches Problem und diese Antwort ist mein problem gelöst. Ich war versucht zu transition: all auf ein element mit beiden opacity und visibility angewendet. Interessanterweise war es Chrome auf iOS, in dem der übergang gänzlich fehlgeschlagen - das element in Frage, blieb unsichtbar; Safari schlicht nicht Rendern, glatt Deckkraft übergang aber offenbarte das versteckte element. Die Angabe transition: opacity festen alles.

    InformationsquelleAutor Michael Martin-Smucker
Schreibe einen Kommentar