Chrome berechnet die Breite nicht neu, wenn sich die Höhe ändert
Ich habe eine Liste mit Thumbnails mit Links und Bildern. Wenn der Nutzer also ein Element li schwebt, wird seine Höhe 100%, aber das Problem funktioniert in Chrome aus irgendeinem Grund falsch . Ich verstehe nicht, warum in Chrome die verschobene li -Breite nicht an ihre "neue" Größe angepasst wird.
(Hinweis: Dies ist eine vereinfachte Version meines Problems)
Dieses Problem tritt auch nur bei :hover auf. aber nicht, sagen wir, mit :nth-child
Update: Problem geht weiter ...
Siehe meine Lösung in den Antworten, ABER das Problem geht weiter..Ich habe mit der Maus gezoomt und Sie werden sehen, dass es passiert..beachte, dass die Anzahl der Bilder sein kann enorm.Aktualisierung 2:
Erzwinge das erneute Zeichnen jedes mousehweel -Ereignisses ...
thumbs.hide().show(0);
3 Antworten
Meine Lösung: Lösungsspielplatz
Die Idee ist, Chrome dazu zu bringen, die Breite neu zu berechnen, indem Sie dem Bild eine neue Höhe geben, die fast im li:hover -Zustand ist. Aber das ist nicht genug für Chrome. Übergänge müssen auch auf img angewendet werden. Das ist alles Voodoo-Kodieren, aber das ist die am wenigsten hässliche Lösung, die ich mir vorstellen konnte:
Ich bin neu hier und ich bin mir nicht sicher, ob dies eine gute Praxis ist, aber ich werde meine Beobachtung posten und keine genaue Lösung:
-
Dasselbe Problem tritt bei Opera auf.
-
Das kam mir komisch vor - wenn
li:hover a img{ border:1px solid black; }oder irgendein ähnlicher css-Code, der keine Änderungen an der aktuellen Situation vornehmen soll, hinzugefügt wird, beginnt alles sehr merkwürdig zu werden. ex - Ссылка
Und hier ist es die Lösung, die ich nicht elegant finde, nur eine schnelle Lösung: Ссылка
EDIT: Nach dem Testen von @Carol McKay's Ergebnis habe ich gemerkt, dass der Übergang das ganze Durcheinander verursacht. Die nächste Verbindung (Knoten 58) ist der Knoten 43, der oben verlinkt ist (was im Grunde genommen der erste Knoten ist, der dem Bild bei Hover hinzugefügt wurde), mit entferntem Übergang, und es funktioniert gut Ссылка .
Es scheint, dass eine CSS-Regel bei Hover hinzugefügt werden sollte, damit die <img/> -Dimensionen neu berechnet werden.
Tags und Links css