Flexslider wirklich vermasselt meine Webseite in Chrome

hat sonst noch jemand diese Art von Problem? Ich habe ein drop-down-Menü am oberen Rand meiner Seite, dann flexslider, dann einige Allgemeine text-und Bilder...es sind zwei Schriften, eine mit der Bezeichnung aus der Google-fonts-API und einer mit fontFace (nur in diesem Fall relevant ist!)..

Bei der Anzeige in Chrome auf meinem mac, bekomme ich einige sehr merkwürdiges Verhalten. Den text auf der Seite wird sehr "Dünn" jedes mal, wenn Sie die Folien verschieben, und einige (aber nicht alle) - navigation-link "Sprung" nach oben und nach rechts durch ein pixel. Ich habe nichts gesehen, und kann nur annehmen, dass es ' s einige seltsame Konflikt?? Ich habe getestet, in der alles, was, die ich finden kann, FF, Opera, Safari und Chrome auf dem mac, IE9, Chrome unter Windows und FF unter Windows. Beide Versionen von Chrome nicht gut Aussehen, aber der mac ist viel schlimmer.

Leider möchte ich lieber nicht aufzählen, mein Projekt auf dem web, bis es 100% abgeschlossen ist, und ich denke, es ist viel zu viel Zeug, um ein Turnschuh..aber nach einem Blick auf die tatsächlichen flexslider web-Seite, die ich gefunden, die gleiche Art von Fehler, wenn du dir die thumbnails du wirst sehen was ich meine (wenn Sie in Chrome natürlich). - http://flexslider.woothemes.com/thumbnail-controlnav.html

Kennt jemand eine Lösung, denn ich möchte zu halten, den code, den ich gearbeitet habe!

Chrome 22.0.1229.94 win7, Chrom 23.0.1255.0 (154635) linux, MSIE9 win7 - Beispiel-Seite gleich aussieht. Vielleicht könntest du poste den screenshot.
Hi nrodic - es wäre schwer zu erfassen, weil es geschieht für etwa eine Sekunde und es kehrt zu den vorherigen (richtigen) Staat...
Ich bin nicht zu sehen, alle Probleme, die auf Chrome 22.0.1229.94 (Mac).
Dies scheint sehr wechselhaft. Es funktioniert ok auf meinem iPad 2 im hochformat, sondern im Querformat wirkt die navigation text, so dass es dünner ist, wenn der Schlitten bewegt. Es ist sehr seltsam!!

InformationsquelleAutor Dan | 2012-10-27

17

Gefunden ein Update, das scheint das problem zu beheben in Chrom ohne Berührung der JS:

Den -webkit-backface-visibility kombiniert mit useCSS:true in den regler init Ursachen behoben, die Positionierung und z-Indizierung brechen, unter Chrome. Erkannte ich die Verrücktheit passiert war, als ich begann zu spielen, um mit der feststehenden top-navbar, den regler, container-und z-index-Werte -- festlegen der z-index höher als der fixierte navbar gemacht, die ungeraden text blinkt, gehen Sie Weg, aber natürlich den regler dann gescrollt auf der Oberseite der festen Navigationsleiste.

Um dies zu umgehen, führen Sie die folgenden zwei Dinge:
- In "flexslider.css" (Zeile 25):
  .flexslider .Folien > li
  Kommentar aus oder entfernen -webkit-backface-visibility: hidden;
- In die flexslider-Initialisierung Skript:
  Angeben 'useCSS : false' in den slider-Optionen*
*Dieser auf true gesetzt ist als Standard von der JS flexslider und weist den browser verwenden, der CSS3-3D-Transformationen, wenn Sie verfügbar sind. Eine unnötige Funktion, wenn Sie mich Fragen, und flexslider scheint zu funktionieren genauso gut ohne Sie.

Hoffe, das hilft!

Danke, das ist sehr interessant. Ich bin ziemlich voll mit Arbeit, aber ich will zurück zu kommen, sehr bald als meine nächste Aufgabe ist es, gehen zu müssen, eine reaktionsschnelle Schieberegler zu!
Alle die ich tun musste, war geben Sie useCSS: false, und es behoben das Problem für mich. Danke! Chrome 24.0.1312.56
Ebenfalls - mit 'useCSS : false,' ist alles, was ich brauchte, wie gut.

InformationsquelleAutor gruntPi9
17

Gelten -webkit-transform: translateZ(0);, um den container von dem betroffenen element und dieses wird halt die flickring.

Das funktioniert auch, wenn Sie ein element innerhalb der flexslider, die text enthält.

CSS-Transformationen bewirken noch einige seltsame Verhalten. Zwingt das element zu Rendern als 3D scheint es zu lösen, für die Grafik-und performance-Störungen.

Getestet auf Chrome v27.0.1453.93.

Dies ist die einzig Richtige Antwort. Ich schwöre, ich dachte, ich war verrückt. Die Etiketten auf einem Formular flackern und anwenden -webkit-transform: translateZ(0);, um die <form> - tag das problem behoben. Ich danke Ihnen so sehr.
Das ist sehr interessant. Ich habe die Arbeit mit CSS3-Animations-Techniken in letzter Zeit, und werde versuchen, dies. Ich habe gesehen mehrere websites jetzt, wo einige der Inhalte "springt" ein oder zwei pixel, wenn ein einzelnes element zu animieren. Safari scheint nicht das für mich tun...
Das war perfekt, vielen Dank.
Ich hatte ein Problem, bei dem drop-down-Menüs erschien dann ausgeblendet bis zum der nächste slider-animation. Chrome nur. Nicht zu sein scheinen ein z-index Problem. Ich übertrug dies auf das Menü die ul behoben. Voodoo!
Auch neuere Versionen von flexslider.css nicht angezeigt, um die -webkit-backface-visibility-wie bereits in einer anderen Antwort.

InformationsquelleAutor tomastley
5

Hinzufügen von position:relative & z-index:1 um .flex-viewport in css-Datei

Völlig arbeitete für mich... zumindest das behebt Durcheinander (gedreht) Grafiken (während die -webkit-backface-visibility-Konzept nicht).

InformationsquelleAutor blackshirt
1

Ich weiß, das ist alt, aber ich dachte, ich würde nur schnell post meine Lösung nach dem hantieren für eine Stunde.

Wie oben:
- In "flexslider.css" Zeile 25: .flexslider .Folien > li Kommentieren, oder
  entfernen -webkit-backface-visibility: hidden;
- In die flexslider-Initialisierung Skript: Geben Sie 'useCSS : false' in die slider-option
- -webkit-transform: translateZ(0) auf das Eltern-element
Dann fügen Sie diese an der Unterseite der "flexslider.css":
```
.flex-viewport {

    -webkit-transition: none;
    -moz-transition: none;
    transition: none;
}
```
Das hat es für mich auf Chrome! Hoffe, es hilft jemand anderes mit diesem problem.

Das ist so ziemlich die gleiche wie die Einstellung des UseCSS argument auf false. Viele CSS3-Probleme sind gelöst mit dem backface-Anzeigeeigenschaften Eigenschaft.

InformationsquelleAutor user1868697
0

Bei mir tritt das exakt gleiche Problem, nachdem ich gerade umgesetzt FlexSlider heute in einer Bootstrap-responsive Website. Das problem nicht replizieren, auf Firefox oder Safari (habe nicht überprüft, IE und noch nicht besonders wollen).

Ich vermute stark, das problem liegt bei den verschiedenen touch, keypress und andere Methoden der FlexSlider JS implementiert, um vorab die slideshow, weil ich entfernte mein CSS (einschließlich meines href auf die Google Font-API) und JS-Skripte nacheinander zu bestimmen, dass der JS FlexSlider erscheint, um den Täter. Die gute Nachricht ist, es ist nicht ein Konflikt mit der Bootstrap-responsive JS, noch scheint es zu sein, alle anderen CSS-Stilen. Immer noch Fehlersuche obwohl, sorry, ich kann nicht mehr hilfreich sein, aber mindestens es ist nicht nur Sie.

Werde ich in diesem post FlexSlider forum. Vielleicht der Entwickler wird sich mit einer Lösung für dieses Chrome-bug in der nächsten Version.

Chrome v23.0.1271.64

InformationsquelleAutor gruntPi9
0

In "flexslider.css" finden ".flexslider .Folien > li" auskommentieren oder entfernen -webkit-backface-visibility: hidden;

InformationsquelleAutor Vijay KC
0

Die Lösung, die gruntPi9 vorgeschlagen für mich gearbeitet. Ich hatte ein problem im Chrome, die Bilder waren springen aus dem Rahmen, und seine Lösung hat das problem gelöst.

Regler: FlexSlider 2

Browser: Chrome

Problem: die Bilder springen aus einem frame

Lösung:
- In "flexslider.css" Zeile 25: .flexslider .Folien > li auskommentieren oder entfernen -webkit-backface-visibility: hidden;
- "Jquery.flexslider.js": Geben Sie 'useCSS : false' in die slider-Optionen
Die useCSS : false option behoben, die Probleme hatte ich mit jumpy Elemente. Eine Menge von Elementen auf meiner Seite schien shift 1 pixel jedes mal, wenn der slide-animation gestartet oder beendet.

InformationsquelleAutor Александар Ристић

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.