it-swarm.com.de

Fehler bei der Transformation: Maßstab und Überlauf: In Chrome versteckt

Beim Arbeiten mit der CSS3-Eigenschaft transform: scale fand ich ein interessantes Problem. Ich wollte einen kleinen Zoomeffekt für Bilder machen. Als ich jedoch für das übergeordnete div overflow: hidden und border-radius verwendet wurde, erweiterte das untergeordnete div das Jenseits des übergeordneten div.

Update:

Problem ist nicht gelöst. Wenn ich transition hinzufüge, funktioniert das immer noch nicht. Ich habe versucht, dieses Problem zu lösen, jedoch ohne Erfolg.

Hier ist eine Demo

49
Jake Blues

Es ist ein bekannter Fehler in Webkit-basierten Browsern - siehe # 62363 . Sie können Ihrer border:1px solid transparent;-Klasse einen .wrap hinzufügen, um das Problem zu umgehen.

Für die aktualisierte Anforderung, einen Übergang zu einem Element mit einem border-radius hinzufügen, ist dies ein weiterer bekannter Chomre/Webkit-Fehler # 157218 . Leider ist noch keine allgemein bekannte Problemumgehung bekannt, obwohl ein Kommentar zu diesem Fehler besagt, dass die Verwendung von chrome://flags und die Verwendung von --ignore-gpu-blacklist in Chrome 29 (das gerade den Chrome Dev-Channel heute getroffen hat) behoben wird.

19
andyb

Die transparente Umrandung funktionierte nicht für mich, sondern um den Z-Index von .wrap div und das Bild zu ändern (in meinem Fall ist das Bild tatsächlich ein Video)

Hier ist die 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;
}

ANMERKUNG: Siehe Jake Blues-Kommentar unten bezüglich der Notwendigkeit eines positionierten Elements, damit der Z-Index ordnungsgemäß funktionieren kann.

27
Ken

transform: translateZ(0); am Wrap-Element hat für mich den Trick gebracht.

Weitere Informationen zu dieser Technik finden Sie unter CSS-Leistung relativ zu translateZ (0) .

23
lefoy

Beide Arten der Lösung dieses Emittenten funktionierten gut:

  1. Fügen Sie einem übergeordneten Wrapper die folgende Zeile hinzu (z-index: 0 ist für das Bild selbst nicht erforderlich): position: relative; z-index: 10

  2. Oder fügen Sie transform: translateZ(0); zu einem übergeordneten Wrapper hinzu (mit den entsprechenden Präfixen für eine bessere Browserunterstützung)

16
Mike Shema

Dies geschieht, weil zusammengesetzte Ebenen nicht von ihren übergeordneten Ebenen beschnitten werden. Manchmal müssen Sie das übergeordnete Element mit overflow:hidden auf eine eigene Compositing-Ebene bringen, damit es overflow:hidden richtig angewendet werden kann.

Sie müssen also die CSS-Eigenschaft transform: translateZ(0) zum übergeordneten Element Ihres transformierten Elements hinzufügen.

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

Dann funktioniert overflow:hidden, da das transformierte Element wie sein transformiertes untergeordnetes Element auf seiner eigenen Rendering-Ebene zusammengesetzt wird.

Getestet mit Safari und Chrome auf iOS- und Nicht-iOS-Geräten

9

Hier ist die Lösung .

Das HTML:

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

Das 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 benötigt ein transparentes border, das die Box umgibt. Hoffe das hilft.

2
Nitesh

Seltsamerweise bin ich nach dem Upgrade auf Chrome 65 gerade auf dieses Problem gestoßen und habe für mich den will-change: transform; zu den IFRAME-Styles hinzugefügt.

2

tut mir leid für mein schlechtes Englisch.

wenn auf der Seite kein positioniertes Element vorhanden ist, müssen weder das Containerelement noch das Z-Index-Attribut des untergeordneten Elements festgelegt werden.

fügen Sie einfach das Attribut z-index: 0 (oder ein anderes) zum Containerelement hinzu.

.container {
    border-radius: .14rem;
    overflow: hidden;
    z-index: 0;
}
.child {

    }
1
bob blunt

Ich hatte ein ähnliches Problem mit der neuesten Version von Chrome 65. Ich habe ein iFrame-Video, das mit transform: scale () in einem div größer skaliert wurde, und bei der neuesten Chrome-Version war es an den Seiten nicht mehr maskiert und wurde nicht mehr angezeigt Herausspringen des übergeordneten Containers auch bei Überlauf: ausgeblendet;

Während translateZ irgendwie geholfen hat, war es nur, als ich translateX für das übergeordnete Element verwandte, stattdessen die Breite richtig maskierte:

 transform:translateX(0);
1
dyad

Ich bin schon lange dabei und das einzige, was für mich funktioniert hat, ist diese rotate(0.1deg) translateZ(0). Wenn Sie also das Element skalieren

.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);

}

ohne das Drehen funktioniert der Fix an meinem Ende nicht. 

Wenn Sie transform zuANYimg übergeordnete Elemente hinzufügen (wie den Container drehen, in dem sich das Bild befindet), müssen Sie beispielsweise dasselbe Element dem Element hinzufügen 

.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);
}
0
Benn

Der Fehler ist in Webkit-Browsern (Safari und Chrome unter iOS) weiterhin vorhanden, wenn die Maske skaliert wird. Und alle oben genannten Problemumgehungen funktionieren nicht. Die Verwendung der nicht standardmäßigen css-Eigenschaft -webkit-mask-box-image hilft jedoch auch bei skalierten Masken.

0
paul