Umieszczają stałe elementy skakać podczas załadunku lub przekierowanie iframe (tylko iPad)

widzi ten problem jasno. Zobacz poniższy film na YouTube. Position fixed elements jump around when redirecting iframe
lub spróbować widget na tej stronie (iPad) Naiise
Umieszczają stałe elementy skakać podczas załadunku lub przekierowanie iframe (tylko iPad)

Uwaga: strona w filmie różni się od miejsca powyżej ponieważ właściciel nie chce używać widżet już przed problem jest naprawiony. Ale mają ten sam problem.
jeszcze jedno: wszystkie stałe elementy na stronie skoku rodzic wokół nie tylko iFrame. Lubi, na iPadzie, stałe elementy muszą zostać ponownie obliczone podczas przekierowywania stron wewnątrz iFrame.

Oto prosty kod, który stworzyłem, aby zasymulować problem. Utwórz z niego plik HTML i uruchom go na symulatorze iPada lub prawdziwym urządzeniu, aby zobaczyć problem.

<html> 
    <body style="height: 10000px"> 
     <div style="color: #ffffff; width: 200px; height: 100px; background: red; position: fixed; left: 20px; bottom:300px;"> 
      Other fixed element 
     </div> 

     <iframe style="height: 500px; width: 420px; position: fixed; bottom: 95px; right: 20px;" src="https://printskitchen.eber.co" /> 
    </body> 
</html>

Źródło

2017-07-24 Hoang Trung

Obie witryny są różne. Czy możesz udostępnić link w filmie? – AmitJS94

Używają tego samego widgetu i mają ten sam problem. Ponieważ witryna zgłasza problem, nie chcesz już używać widżetu, zanim problem zostanie rozwiązany, nie mogę podać Ci linku. –

@HoangTrung używasz niestandardowego stylu wtyczki, aby zmienić jej pozycję.? – weBBer

Problem spowodowany jest przez transformację translate3d które obowiązują na iframe;

-webkit-transform: translate3d(0, 0, 0);

Jest dobrze znany problem, w którym translate3d powoduje position:fixed elementy zachowują się jak position:absolute w niektórych przeglądarkach WebKit, takich jak te na iOS, a także niektórych wersjach stacjonarnych Chrome.

Oto demo, które pokazuje błąd w działaniu:

html, 
 
body { 
 
    width:100%; 
 
    height:100%; 
 
    margin:0; 
 
    padding:0; 
 
    transform: translate3d(0, 0, 0); 
 
} 
 

 
#nav{ 
 
    width:100%; 
 
    height:10%; 
 
    position:fixed; 
 
    top:0; 
 
    left:0; 
 
    background-color:red; 
 
} 
 

 
#content { 
 
    width:100%; 
 
    height:500%; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<body> 
 
    <nav id="nav"> 
 
    </nav> 
 
    <main id="content"> 
 
    </main> 
 
</body> 
 
</html>

W demo, czerwona nav powinien być widoczny nawet po przewinięciu w dół. W zależności od przeglądarki może ona działać lub nie, tak jak jest. Usunięcie problematycznego stylu powoduje, że działa on poprawnie we wszystkich przeglądarkach.

Ten błąd występuje z powodu przekształcenia, tworząc nowy układ współrzędnych, powodując, że element position:fixed zostanie umieszczony na przekształconym elemencie zamiast w oknie roboczym.

ja natknąłem się na ten błąd, starając się wygładzić przejścia na iOS i stworzył post o tym here. Więcej informacji można znaleźć na this wątku który mam również powiązany w moim poście.

Jedyny murowany fix znam jest usunięcie problematycznej translate3d styl. Jeśli jest to konieczne, na przykład w celu nakłonienia systemu iOS do włączenia akceleracji sprzętowej (tego właśnie potrzebowałem), spróbuj zastosować ją do różnych elementów: rodziców (body, html) lub dzieci uchwyt iframe. Odkryłem, że zastosowanie go do zupełnie niezwiązanego elementu dało mi pożądany rezultat.

Istnieje również kilka obejścia i poprawki w wątku Mam związane przypadek specyficzny. Jeden z nich może załatwić sprawę.

To dość paskudny błąd do wyśledzenia. Zajęło mi trochę czasu, aby znaleźć go na mojej własnej stronie.

Powodzenia.

Źródło

2017-08-01 09:31:42 stybl

Właściwie to mam problem przed dodaniem stylu transform3d. Właśnie dodałem go, aby sprawdzić, czy może rozwiązać problem. Jak sugerujesz, również usunąłem go, by sprawdzić, ale to nie działa. Nadal przeskakuję, gdy przekierowuję element iframe. –

Staraj się nie zmieniać właściwości height i display (powinieneś również usunąć opacity). Zamiast tego podaj # iframe-holder will-change: transform; i spróbuj: transform: translateX(150%);, gdy widget powinien zostać zwinięty.

Nie powinien powodować ponownego renderowania widgetu (problem może powodować problem z wyświetlaniem), a wydajność będzie większa.

Źródło

2017-08-02 10:48:37 maszynka

Dzięki. Nie ma problemu z zwijanym widżetem, chodzi o przekierowanie stron wewnątrz elementu iframe na wszystkie elementy o ustalonej pozycji w witrynie nadrzędnej, nie tylko iFrame, ale również zaktualizowałem swój kod zgodnie z sugestią, niestety problem nadal istnieje. –

Wyszukuje mnie jako problem ze zmianą rozmiaru, położenia lub właściwości wyświetlania (nie powinien się ruszać, jeśli tak nie jest) .Przyprowadź skrzypce kodem, który będzie odtworzyć problem. – maszynka

Dodano kod demo w opisie pytania. Uruchom go na iPadzie, aby zobaczyć problem. –

Doszedłem do wniosku, że jeśli zmienisz pozycję z ustalonej na absolutną, wszystko będzie działać idealnie. Możesz wykonać następujący samouczek, aby emulować stałą pozycję przez jednoznaczne położenie. https://gabrieleromanato.name/jquery-emulate-css-fixed-positioning-on-mobile-browsers

Źródło

2017-08-03 08:22:49

Umieszczają stałe elementy skakać podczas załadunku lub przekierowanie iframe (tylko iPad)

Odpowiedz

Powiązane problemy