zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden hover flickert im firefox

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 20.04.2016, 16:12
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.04.2016
Beiträge: 3
kloppenburg befindet sich auf einem aufstrebenden Ast
Unglücklich 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>
css:
Code:
.example img{
transition:all 1s ease;
position:relative;
z-index:1
}
.example img:hover{
transform:scale(1.20)
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 20.04.2016, 16:32
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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...
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 20.04.2016, 16:50
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.04.2016
Beiträge: 3
kloppenburg befindet sich auf einem aufstrebenden Ast
Standard

leider funktionieren beide lösungen von dir nicht: https://jsfiddle.net/nx9q3mna/3/ (mit STRG + F5 neuladen)
Mit Zitat antworten
  #4 (permalink)  
Alt 20.04.2016, 17:29
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.247
cloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblickcloned ist ein wunderbarer Anblick
Standard

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
Mit Zitat antworten
  #5 (permalink)  
Alt 20.04.2016, 19:20
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 20.04.2016
Beiträge: 3
kloppenburg befindet sich auf einem aufstrebenden Ast
Standard

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)
Mit Zitat antworten
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ä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


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:04 Uhr.