Flexslider naprawdę psuje moją stronę w Chrome

Question

czy ktoś inny miał tego rodzaju problem? Mam menu rozwijane u góry mojej strony, potem Flexslider, a potem ogólny tekst i obrazy ... są dwie czcionki, jedna z interfejsem API czcionek Google i jedna z czcionkami fontFace (na wszelki wypadek, jeśli jest to istotne) !) ..

Podczas przeglądania w przeglądarce Chrome na moim komputerze mac występują dziwne zachowania. Cały tekst na stronie staje się bardzo "cienki" za każdym razem, gdy slajdy się poruszają, a niektóre (ale nie wszystkie) linki nawigacyjne "przeskakują" w górę i w prawo o piksel. Nie widziałem nic takiego i mogę tylko założyć, że to jakiś dziwny konflikt? Testowałem we wszystkim, co mogę znaleźć: FF, Opera, Safari i Chrome na Macu, IE9, Chrome na Windows i FF na Windowsie. Obie wersje Chrome nie wyglądają dobrze, ale wersja Mac jest znacznie gorsza.

Niestety, nie chciałbym opublikować mojego projektu w Internecie, dopóki nie zostanie ukończony w 100%, i myślę, że jest to o wiele za dużo, by zrobić skrzypce ... ale po przejrzeniu rzeczywistej strony internetowej programu Flexslider znalazłem ten sam rodzaj winy, jeśli obejrzysz miniaturki, zobaczysz, o co mi chodzi (jeśli oczywiście jesteś w Chrome). - http://flexslider.woothemes.com/thumbnail-controlnav.html

Czy ktoś zna poprawkę, ponieważ chciałbym zachować kod, nad którym pracuję!

Answer 1

Mam dokładnie ten sam problem, po prostu zaimplementowałem FlexSlider dzisiaj w responsywnej witrynie Bootstrap. Problem nie jest replikowany w Firefoksie ani Safari (nie sprawdziłem jeszcze IE i nie chcę tego specjalnie).

Podejrzewam, że problem tkwi w różnych metodach dotykania, naciskania klawisza i innych metodach narzędzi FlexSlider JS w celu przyspieszenia pokazu slajdów, ponieważ usunąłem mój CSS (w tym mój href do Google Font API) i skrypty JS jeden po drugim do ustalenie, że JS FlexSlider wydaje się być winowajcą. Dobrą wiadomością jest to, że nie jest to konflikt z JS reagującym na Bootstrap, ani nie wydaje się być żadnym innym stylem CSS. Mimo to wciąż próbuję rozwiązać problem, ale nie mogę być bardziej pomocny, ale przynajmniej nie tylko ty.

Zamierzam opublikować to na forum FlexSlider. Może deweloper zajmie się poprawką do tego błędu Chrome w następnej wersji.

---

Chrome v23.0.1271.64

Answer 2

Znaleziony poprawka, która wydaje się rozwiązać problem w Chrome bez dotykania JS:

The -webkit-tylna strona widoczności połączeniu z useCSS : true w suwaku init powoduje, że ustalone pozycjonowanie i indeksowanie z powodu łamania pod Chrome. Zdałem sobie sprawę, że dziwność ma miejsce, gdy zacząłem grać z fixed topowym navbarem, kontenerem suwakowym i wartościami z-index - ustawienie z-indeksu wyżej niż stały navbar powodowało, że dziwny tekst migał, ale oczywiście suwak następnie przewijany na szczycie stałego paska nawigacyjnego.

Aby obejść ten problem, wykonaj następujące dwie rzeczy:

• w kolejce "flexslider.css" 25: .flexslider.slajdy> li Skomentuj lub usuń-webkit-backface-visibility: hidden;
• W skrypcie inicjującym flexslider: Określ 'useCSS: fałszywy' w opcjach suwak *

* To jest ustawiona na wartość true jako domyślny przez flexslider JS i informuje przeglądarkę do użyj transformacji 3D CSS3, jeśli są dostępne. Niepotrzebną cechą, jeśli pytasz mnie, a flexslider wydaje się działać bez niego.

Mam nadzieję, że to pomoże!

Answer 3

Dodaj position: relative & z-index: 1 do .flex-rzutnię w pliku css

Answer 4

W "flexslider.css" znaleźć ".flexslider .slides> li" Wykomentuj lub usunąć -webkit-backface- widoczność: ukryta;

Answer 5

Rozwiązanie, które zaproponował mi gruntPi9. W Chrome miałem problem, obrazy wyskakiwały z kadru, a jego rozwiązanie rozwiązało problem.

suwaka: FlexSlider 2

Przeglądarka: Chrom

Problem: Obrazy skoków na ramie

Rozwiązanie:

• W "flexslider.css" linia 25: .flexslider .slides> li skomentuj lub usuń -webkit-backface-visibility: hidden;
• W "jquery.flexslider.js": Określenie 'useCSS: false' w opcjach suwak

Answer 6

Zastosuj -webkit-transform: translateZ (0); do pojemnika dotkniętego elementu, a to zatrzyma migotanie.

Działa to również wtedy, gdy w elemencie flexslider znajduje się element zawierający tekst.

Transformacje CSS nadal powodują dziwne zachowanie. Wymuszenie renderowania elementu jako 3D wydaje się rozwiązywać błędy graficzne i wydajnościowe.

Testowano w przeglądarce Chrome w wersji 27.0.1453.93.

Answer 7

Wiem, że to jest stare, ale pomyślałem, że po prostu szybko opublikuję swoje rozwiązanie po błądzeniu przez godzinę.

jak powyżej:

• W "flexslider.css" linia 25: .flexslider.slajdy> li Comment out lub remove -webkit-backface-visibility: hidden;
• W skrypcie inicjującym flexslider: Określenie 'useCSS: false' w opcji suwaka
• -webkit-transform: translateZ (0) na elemencie macierzystym

Następnie dodać do dołu „flexslider .css ":

.flex-viewport { 

    -webkit-transition: none; 
    -moz-transition: none; 
    transition: none; 
} 

Zrobiłem to dla mnie w Chrome! Mam nadzieję, że pomoże to każdemu, kto ma ten problem.