Błąd z transform: scale and overflow: hidden in Chrome

Przezroczysta obramowanie nie zadziałało dla mnie, ale aby zmienić indeks z .wrap div I obraz pracował (w moim przypadku obraz jest w rzeczywistości wideo)

Oto css:

.videoContainer{
    overflow: hidden;
    z-index: 10;
}

video{
    margin-left: -55%;
    transform: scale(-1,1);
    -webkit-transform: scale(-1,1);
    -moz-transform: scale(-1,1);
    z-index: 0;
}

Uwaga: zobacz poniżej komentarz Jake ' a bluesa dotyczący konieczności posiadania pozycjonowanego elementu umożliwiającego poprawne działanie z-index.

transform: translateZ(0); na elemencie zawijania zrobił dla mnie sztuczkę.

Zobacz wydajność CSS względem translateZ (0) aby uzyskać więcej informacji na temat tej techniki.

Oba sposoby rozwiązania tego emitenta działały dobrze:

1. Dodaj następującą linię do opakowania nadrzędnego (z-index: 0 nie jest konieczne dla samego obrazu): position: relative; z-index: 10

2. Lub dodaj transform: translateZ(0); do opakowania nadrzędnego (z odpowiednimi prefiksami dla lepszej obsługi przeglądarki)

Dzieje się tak, ponieważ złożone warstwy nie są przycinane przez ich warstwy nadrzędne. Czasami więc trzeba doprowadzić rodzica z overflow:hidden na jego własną warstwę kompozytową, aby mógł prawidłowo zastosować overflow:hidden.

Więc musisz dodać właściwość CSS transform: translateZ(0) do elementu nadrzędnego przekształconego elementu.

/* add to parent so it is composited on its own layer before rendering */
.parent-of-transformed-element {
     -webkit-transform:translateZ(0);
     transform:translateZ(0);
}

Wtedy overflow:hidden będzie działać, ponieważ przekształcony element będzie komponowany na własnej warstwie renderującej, tak jak jego przekształcone dziecko.

Testowane na najnowszych Safari i Chrome na urządzeniach z systemem iOS i innych niż iOS]}

Oto rozwiązanie .

HTML:

<div class="wrap">
    <div class="image"></div>
</div>

CSS:

.wrap{
    width: 400px;
    height: 260px;
    overflow: hidden;
    border-radius: 15px;
    border:1px solid transparent;
}
div.image{
    background: url(http://blog.dothegreenthing.com/wp-content/uploads/2012/10/take-a-smile.jpg) no-repeat;
    width: 400px;
    height: 260px;


}
div.image:hover{
    -webkit-transform: scale(1.2, 1.2);
    transform: scale(1.2, 1.2);
    cursor: pointer;
    border:1px solid transparent;
}

Chrome potrzebuje przezroczystego border otaczającego pudełko. Mam nadzieję, że to pomoże.

O dziwo właśnie napotkałem ten problem po aktualizacji do Chrome 65 i dla mnie dodanie will-change: transform; do stylów IFRAME załatwiło sprawę.

Miałem podobny problem z najnowszą wersją Chrome 65. Mam film iFrame przeskalowany na większe za pomocą transform: scale() w div, a w najnowszej wersji Chrome nie był już zamaskowany po bokach i wyskakiwał z kontenera nadrzędnego, nawet z overflow: hidden;

Podczas translateZ jakby pomógł, to dopiero gdy użyłem translateX na rodzica zamiast to maskuje szerokość poprawnie:

 transform:translateX(0);

Błąd nadal istnieje w przeglądarkach webkit (Safari i Chrome pod iOS), gdy maska jest skalowana. I wtedy wszystkie obejścia powyżej nie działają. Ale użycie niestandardowej właściwości css -webkit-mask-box-image pomaga również w skalowaniu masek.

Szukałam tego od dawna i jedyne, co mi się udało, to to rotate(0.1deg) translateZ(0) . Więc jeśli skalujesz element

.something:hover img{

    -webkit-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    -moz-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    -o-transform: scale(1.1) rotate(0.1deg) translateZ(0);
    transform: scale(1.1) rotate(0.1deg) translateZ(0);

}

Bez obracania poprawka nie działa po mojej stronie.

Jeśli dodasz transform do dowolnego rodzica img ( jak obrócenie kontenera, w którym znajduje się obraz), musisz dodać tę samą poprawkę do elementu, na przykład

.something_parent{
    transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -webkit-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -mos-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
    -o-transform: translate(-9%,9%) rotate(0.1deg) translateZ(0);
}

Cóż... próba znalezienia obejścia okazało się, że

-webkit-appearance: button; 

Naprawiono to zachowanie, ale ma pewne niepożądane skutki uboczne, jeśli element w rzeczywistości nie jest przyciskiem, jak obramowania zachowujące się dziwnie, ale zastąpienie <a> przez <button> w moim przypadku zachowało skalowaną zawartość w swoich granicach.