변형 버그 : 스케일 및 오버 플로우 : Chrome에서 숨김

변형 버그 : 스케일 및 오버 플로우 : Chrome에서 숨김

---

CSS3 속성으로 작업하면서 transform: scale흥미로운 문제를 발견했습니다. 사진에 약간의 줌 효과를 만들고 싶었습니다. 그러나 부모 div overflow: hidden및 border-radius을 사용하면 자식 div가 부모 div를 넘어 확장되었습니다.

최신 정보:

문제가 해결되지 않았습니다. 내가 추가 transition하면 여전히 작동하지 않습니다. 이 문제를 해결하려고했지만 성공하지 못했습니다.

다음은 데모입니다.

---

Webkit 기반 브라우저의 알려진 버그입니다 . # 62363을 참조하세요 . 당신은 추가 할 수 있습니다 border:1px solid transparent;당신에게 .wrap문제를 해결하는 클래스입니다.

업데이트 된 요구 사항의 경우를 사용하여 요소에 전환을 추가하는 border-radius것은 또 다른 Chomre / Webkit 버그 # 157218 입니다. 미안하지만 알려진 일반적인 해결 방법은 아직 없지만 해당 버그에 대한 한 의견에 따르면 플래그를 chrome://flags사용하여 --ignore-gpu-blacklistChrome 29 에서 문제가 해결되었다고 말합니다 (오늘 Chrome 개발자 채널에 막 강타했습니다).

---

투명한 테두리는 나를 위해 작동하지 않았지만 .wrap div의 z-index를 변경하고 이미지가 작동했습니다 (제 경우에는 이미지가 실제로 비디오입니다)

다음은 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;
}

참고 : Z- 인덱스가 제대로 작동하도록 요소를 배치해야하는 필요성에 대해서는 아래의 Jake Blues 주석을 참조하십시오.

---

transform: translateZ(0); 랩 요소에서 나를 위해 트릭을했습니다.

이 기술에 대한 자세한 내용은 translateZ (0) 과 관련된 CSS 성능을 참조하십시오 .

---

이 발급자를 해결하는 두 가지 방법 모두 잘 작동했습니다.

1. 다음 줄을 상위 래퍼에 추가합니다 ( z-index: 0이미지 자체에는 필요하지 않음).position: relative; z-index: 10

2. 또는 transform: translateZ(0);상위 래퍼에 추가 (더 나은 브라우저 지원을 위해 해당 접두사 사용)

---

이는 합성 된 레이어가 상위 레이어에 의해 잘리지 않기 때문에 발생합니다. 따라서 때로는 올바르게 overflow:hidden적용 할 수 있도록 부모를 자체 합성 레이어 로 가져와야 overflow:hidden합니다.

따라서 transform: translateZ(0)변환 된 요소의 상위 요소에 CSS 속성 을 추가해야합니다 .

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

그런 다음 overflow:hidden변형 된 요소가 변형 된 자식처럼 자체 렌더링 레이어에서 합성되기 때문에 작동합니다.

iOS 및 비 iOS 장치의 최신 Safari 및 Chrome에서 테스트되었습니다.

---

이상하게도 Chrome 65로 업그레이드 한 후이 문제가 발생 will-change: transform;했으며 IFRAME 스타일을 추가 하는 것이 트릭이었습니다.

---

여기에 해결책이 있습니다.

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;
}

크롬 border은 상자를 둘러싼 투명이 필요합니다 . 도움이 되었기를 바랍니다.

---

최신 버전의 Chrome 65에서 비슷한 문제가 발생했습니다. div에서 transform : scale ()을 사용하여 iFrame 비디오를 더 크게 확장했으며 최신 Chrome 버전에서는 더 이상 측면에 가려지지 않고 밖으로 튀어 나왔습니다. 오버플로가있는 경우에도 부모 컨테이너 : hidden;

translateZ가 도움이되었지만 부모에서 translateX를 대신 사용했을 때만 너비를 적절하게 마스킹했습니다.

 transform:translateX(0);

---

저의 가난한 영어에 대해 죄송합니다.

페이지에 위치 지정 요소가없는 경우 컨테이너 요소와 하위 요소 Z- 색인 속성을 둘 다 설정할 필요가 없습니다.

just adding z-index: 0(or other) attribute to container element.

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

    }

---

The bug still exists in webkit Browsers (Safari and Chrome under iOS) when the mask is scaled. And then all the workarounds above do not work. But using the non standard css property -webkit-mask-box-image helps for scaled masks as well.

---

I have been after this for long time and only thing that has worked for me is this rotate(0.1deg) translateZ(0) . So if you are scaling the 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);

}

without the rotate the fix does not work on my end.

If you add transform to ANY img parent ( like rotate the container where the image is ) , you need to add same fix to the element for example

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

---

Well... trying to find a workaround found that

-webkit-appearance: button; 

fixed this behavior, but has some undesirable side effects if the element isn´t actually a button, like borders behaving wierd, but, replacing <a> with <button> in my case kept the scaled content within its bounds.

ReferenceURL : https://stackoverflow.com/questions/16687023/bug-with-transform-scale-and-overflow-hidden-in-chrome