|
|||
hover flickert im firefox
habe seit ein paar wochen das problem das beim ersten mal wenn man mit dem mauszeiger über das bild geht, es im firefox zu einer "flicker" animation kommt. da ich viele vorschaubilder verwende, ist es ziemlich störend. im browser chrome ist dieser "bug" nicht vorhanden.
online beispiel: https://jsfiddle.net/nx9q3mna/ einfach mit STRG + F5 die seite neuladen, und wieder mit der maus über ein bild fahren, dann erscheint wieder dieser bug. beim zweiten mal mouseover ist der bug weg. scheint irgendein problem mit dem cache oder sowas zu sein? danke. html: HTML-Code:
<div class="example"> <img src="http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpou7uifDhh3szdYz9D4uO6nYeDg7mgariClDMFusQh2LiTo9nw0FCw_UU6Y2ymdtOXclBtZl6B_AXolby-m9bi6yrTVV9L/200fx200f" width="160" height="160" alt="" /> </div> <div class="example"> <img src="http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXH5ApeO4YmlhxYQknCRvCo04DEVlxkKgpouLWzKjhzw8zSdD9Q7d-3mb-HnvD8J_WFlzoC6sFy3u_Apo6gi1Djr0tlMGGgd46WdQY-NVuB-1K9w-i-g8W_ot2XnqyWhAHr/200fx200f" width="160" height="160" alt="" /> </div> <div class="example"> <img src="http://steamcommunity-a.akamaihd.net/economy/image/-9a81dlWLwJ2UUGcVs_nsVtzdOEdtWwKGZZLQHTxDZ7I56KU0Zwwo4NUX4oFJZEHLbXU5A1PIYQNqhpOSV-fRPasw8rsUFJ5KBFZv668FF8ugPDMIWpAuIq1w4KIlaChZOyFwzgJuZNy3-2T89T0jlC2rhZla2vwIJjVLFHz75yKpg/200fx200f" width="160" height="160" alt="" /> </div> Code:
.example img{ transition:all 1s ease; position:relative; z-index:1 } .example img:hover{ transform:scale(1.20) } |
Sponsored Links |
|
|||
Problemlösung: füg bei .example img{} ein transform: scale(1) hinzu.
Warum das genau hilft kann ich nur im Ansatz sagen: Wenn etwas skaliert, etc. wird, dann wird das vom Browser "irgendwie" in einen neuen Rendering-Stack geschoben. Gibst du dem Bild jetzt von Haus aus ein scale(1) dann gibt der Browser das sofort in den neuen Render-Stack und es flackert nicht. Alternativ sollte auch transform-style: preserve-3d; wirken, das sollte das selbe machen. Advanced CSS3 2D and 3D Transform Techniques (weit runterscrollen oder nach preserve suchen) Du brauchst zwar kein 3D aber wenns hilft... |
Sponsored Links |
|
|||
leider funktionieren beide lösungen von dir nicht: https://jsfiddle.net/nx9q3mna/3/ (mit STRG + F5 neuladen)
|
|
|||
Das tut mir leid, dann habe ich wohl nicht genug getestet :/ Oder nicht richtig neugeladen (dann ist das Problem ja nicht mehr vorhanden)
Da habe ich aber nun auch keine Lösung mehr, tut leid |
|
|||
https://bugzilla.mozilla.org/show_bug.cgi?id=1266083
ich hab ein bug report bei mozilla gemacht, das problem scheint bekannt zu sein und soll in firefox 46+ behoben sein. ich bin nach wie vor offen für workarounds. (sofern irgendwie möglich) |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hilfe css Menu center | xXcyberXx | CSS | 5 | 28.11.2010 20:51 |
Problem mit CSS Menü | SMundt | CSS | 9 | 07.01.2009 20:12 |
CSS Navigation - Problem mit IE6 | pcklinik | CSS | 4 | 18.09.2007 13:04 |
Darstellungsproblem CSS Navigation im IE7 | pcklinik | CSS | 7 | 09.09.2007 18:25 |
CSS Einsteiger bittet um Hilfe | pcklinik | CSS | 0 | 06.09.2007 15:40 |