Snažím sa vytvoriť web paralaxy. Ale potom mám problém s pevným umiestnením.
Mám niekoľko oddielov, každý s a background-attachment:fixed, position:fixed horná časť ponuky so skrytým prvkom v hornej časti všetkých sekcií. Mapa Google je 100% v jednej z sekcií.
Teraz je problém, keď stránku posúvam animáciou v prehliadači Google Chrome, rolovanie nejde hladko a počas rolovania niekoľkokrát zabliká.
Robím rolovanie pomocou pluginu greensock scrollTo, ale to nie je problém, pretože som to tiež testoval pomocou jQuery. .animate() metóda. Rovnaký výsledok.
Urobil som výskum a zistil som, že chróm máchyba alebo problém s pevným umiestnením (a niekedy, keď doň vložíte skrytý prvok), Niektoré stránky navrhli použiť tieto dve s pevnými prvkami:
-webkit-backface-visibility:hidden;
-webkit-transform: translateZ(0);
Pridal som to do pevného menu a niektoré jeho trhané správanie sa znížilo, ale stále nie je plynulé. Ak to pridám do sekcií s background-attachment:fixed prvkov, posúvacia animácia bude plynulá, ale už nebude fungovať ako pevná.
Niekto hovorí, že chróm má problém s veľkými obrázkami, niektorí hovoria, že má problém s pevnou pozíciou a niekto mal riešenie, ktoré pre mňa nefungovalo: D
Nahral som stránku: http://www.FarzanMohajerani.com/test/parallax jednoducho kliknite kamkoľvek na stránku a posúvajte sa.
Vytvoril som tiež jsFiddle s rovnakým kódom. Ale neviem, prečo to nemá problém v jsFiddle: http://jsfiddle.net/Farzanmc/cRqxT/5/
Bolo by skvelé, keby ma niekto mohol nasmerovať na správne riešenie alebo mi pripomenúť, či nerobím niečo zlé. Vďaka
odpovede:
2 pre odpoveď č. 1To ma vyriešilo:
-webkit-transform: translate3d(0,0,0);
Pridaním tohto pravidla sa prvok zmení na vrstvu v prehliadači Chrome, ktorá zabráni opätovnému natieraniu. V mojej jedinečnej situácii bola chyba spôsobená opätovným maľovaním prehliadača.
1 pre odpoveď č. 2
Ja “, ktorý má v súčasnosti rovnaký problém s prehliadačom Chrome, som príčinu zúžil na nasledujúcu kombináciu:
1) pozadie: pevné; 2) transformácia: (akákoľvek transformácia, aj keď len mierka (1), ju okamžite zlomí).
Pokiaľ je prvok, ktorý obsahuje pevnéobrázok na pozadí nemá žiadnu „transformáciu“, funguje to dobre, ale akonáhle pridáte „transform: scale (1);“ ktorý skutočne neuskutoční žiadnu skutočnú transformáciu, úplne zlomí pevný obrázok na pozadí) , Môžete začať rolovať, ale zmizne. Ak bol mimo obrazovky, nikdy sa neobjaví vôbec, bez ohľadu na to, ako ďaleko sa posúvate.
Problém v podstate spočíva v tom, že prehliadač Chrome na webemoment nedokáže spracovať pevné pozadie v transformovaných prvkoch. Nezáleží na tom, o akej úrovni potomka alebo predka hovoríme. Ide o to, že je to do značnej miery podstatná vec a ja naozaj dúfam, že bude opravená čo najskôr, pretože je mimoriadne obmedzujúca. Nemôžete prehliadať prehliadač Chrome, akoby to bol IE6.
A môžete „použiť“ pozíciu: fixed; "na prvku„ img ", pretože bude pripevnený k prvému" transformovanému "predkovi, nie na skutočnej obrazovke, pretože podľa W3C sa zdá, že by sa s ním malo zaobchádzať. uvítala by sa nová hodnota, niektoré, ktoré sa môžu zlomiť až do samotného okna a opraviť na tieto súradnice.
1 pre odpoveď č. 3
Bežal som na rovnaký problém a opravil som ho týmto spôsobom: Musel som sa vysporiadať s pevnou hlavičkou na webe a kedykoľvek by som sa posúval kolieskom myši, hlavička by bola trhaná .... Mal som displej: žiadny prvok v hlavičke a hneď po odstránení prvku sa hlavička opravila a stabilný, teraz sa zobrazuje dobre bez ohľadu na to, ako rýchlo sa posúvam.