-webkit-transform을 사용할 때 고정 위치가 작동하지 않습니다

-webkit-transform (및 -moz-transform / -o-transform)을 사용하여 div를 회전시킵니다. 또한 div가 사용자와 함께 스크롤되도록 위치 고정이 추가되었습니다.

Firefox에서는 제대로 작동하지만 웹킷 기반 브라우저에서는 작동하지 않습니다. -webkit-transform을 사용한 후 고정 위치가 더 이상 작동하지 않습니다! 어떻게 가능합니까?

몇 가지 조사 후,이 있었다 버그 보고서 상의 크롬 지금까지 웹킷 브라우저가 동시에이 두 가지 효과를 렌더링 할 수 없습니다,이 문제에 대한 웹 사이트.

스타일 시트에 Webkit 전용 CSS를 추가하고 변환 된 div를 이미지로 만들고 배경으로 사용하는 것이 좋습니다.

@media screen and (-webkit-min-device-pixel-ratio:0) {
  /* Webkit-specific CSS here (Chrome and Safari) */

  #transformed_div {
    /* styles here, background image etc */
  }
}

따라서 지금은 웹킷 브라우저가 FF를 따라 잡을 때까지 구식 방식으로해야합니다.

편집 : 2012 년 10 월 24 일 현재 버그가 해결되지 않았습니다.

이것은 버그가 아닌 별도의 좌표계와 스태킹 순서를 필요로하는 두 가지 효과로 인해 사양의 한 측면으로 보입니다. 이 답변에 설명 된대로 .

CSS 변환 스펙은 이 동작을 설명합니다. 변형이있는 요소는 고정 위치 자손의 포함 블록으로 작동하므로 변형이있는 항목 아래에 position : fixed가 더 이상 고정 된 동작을 갖지 않습니다.

그들은 같은 요소에 적용될 때 작동합니다. 요소는 고정 된 위치에 놓인 다음 변형됩니다.

background-attachment와 동일한 문제로 인해 배경 이미지가 Chrome에서 사라지는 경우 : fixed; -이것은 내 해결책이었습니다.

// run js if Chrome is being used
if(navigator.userAgent.toLowerCase().indexOf('chrome') > -1) {
    // set background-attachment back to the default of 'scroll'
    $('.imagebg').css('background-attachment', 'scroll');

    // move the background-position according to the div's y position
    $(window).scroll(function(){

        scrollTop = $(window).scrollTop();
        photoTop = $('.imagebg').offset().top;
        distance = (photoTop - scrollTop);
        $('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px');

    });
}  

나를 위해 일한 것 (약간 해키)은 position:sticky대신에 :

.fixed {
     position: sticky;
}

2016 년 8 월 및 고정 위치 및 애니메이션 / 변환은 여전히 ​​문제입니다. 나를 위해 일한 유일한 해결책은 시간이 오래 걸리는 자식 요소에 대한 애니메이션을 만드는 것입니다.

실제로이 "버그"를 수정하는 다른 방법을 찾았습니다.

CSS3 애니메이션이있는 페이지를 보유하는 컨테이너 요소가 있습니다. 페이지가 애니메이션을 완료하면 css3 속성의 값은 transform : translate (0,0);입니다. 그래서 방금이 줄을 제거하고 모든 것이 제대로 작동했습니다-위치 : 고정이 올바르게 표시됩니다. CSS 클래스를 적용하여 페이지를 번역하면 번역 속성이 추가되고 css3 애니메이션도 작동합니다.

예:

.page {
     top: 50px;
     position: absolute;
     transition: ease 0.6s all;
     /* -webkit-transform: translate(0, 0); */
     /* transform: translate(0,0); */
 }
 .page.hide {
     -webkit-transform: translate(100%, 0);
     transform: translate(-100%, 0);    
 }

데모 : http://jsfiddle.net/ZWcD9/

내 phonegap 프로젝트에서 웹킷 변환 -webkit-transform : translateZ (0); 매력처럼 일했다. 이미 모바일 브라우저가 아닌 크롬과 사파리에서 작동했습니다. 또한 WRAPPER DIV가 완료되지 않는 문제가 하나 더있을 수 있습니다. 플로팅 DIV의 경우 명확한 클래스를 적용합니다.

<div class="Clear"></div> .Clear, .Clearfix{clear:both;}

아마도 Safari 또는 Firefox에서 복제 할 수 없기 때문에 Chrome의 버그로 인해 발생하지만 Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output 에서 작동합니다.

그것은 매우 특별한 구조이므로 보편적으로 적용 가능한 한 줄짜리 CSS 수정은 아니지만 Safari와 Firefox에서 작동하도록 누군가가 생각할 수 있습니다.

react-swipeable-views (rsw)로 반응 색을 구현하려고 시도하는 동안이 문제가 발생했습니다. 나에게 문제는 rsw translate(-100%, 0)가 탭 패널에 적용 되어 클릭하면 색상 선택기 모델을 닫는 전체 화면에 추가 된 기본 고정 위치 div를 중단 한다는 것 입니다.

나에게 해결책은 고정 요소에 반대 변환을 적용하는 것이 었습니다 (이 경우 translate(100%, 0)내 문제를 해결했습니다. 다른 경우에 이것이 유용한 지 확실하지 않지만 어쨌든 공유 할 것이라고 생각했습니다.

다음은 위에서 설명한 내용을 보여주는 예입니다.

https://codepen.io/relativemc/pen/VwweEez

-webkit-transform고정 요소에를 추가하면 문제가 해결되었습니다.

.fixed_element {
   -webkit-transform: translateZ(0);
   position: fixed;
   ....
} 

다음은 테스트 된 모든 브라우저 및 모바일 장치 (Chrome, IE, Firefox, Safari, iPad, iphone 5 및 6, Android)에서 작동하는 것입니다.

img.ui-li-thumb {
    position: absolute;
    left: 1px;
    top: 50%;

    -ms-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
}

조상에 변형을 적용하면 요소의 고정 위치가 손상됩니다.

<div style='position:fixed;-.*-transform:scale(2)'>...</div> //ok

<div style='-.*-transform:scale(2)'>
      <div style='position:fixed'>...</div> // broken
</div>

옵션으로 자바 스크립트를 사용할 수있는 경우 이것은 위치 고정 요소가 변형 된 요소 내부에있을 때 창과 관련이있는 위치 고정 요소를 배치하는 해결 방법이 될 수 있습니다.

  let fixedEl // some node that you is position 
              // fixed inside of an element that has a transform

  const rect = fixedEl.getBoundingClientRect()
  const distanceFromWindowTop = rect.top
  const distanceFromWindwoLeft = rect.left
  let top = fixedEl.offsetTop
  let left = fixedEl.offsetLeft

  if(distanceFromWindowTop !== relativeTop) {
    top = -distanceFromWindowTop
    fixedEl.style.top = `${top}px`
  }

  if(distanceFromWindowLeft !== relativeLeft) {
    left = -distanceFromWindowLeft
    fixedEl.style.left = `${left}px`
  }

fixedEl컨테이너를 기준으로 계산 하므로 높이와 너비를 조정해야합니다 . 사용 사례에 따라 다르지만 컨테이너에 관계없이 고정 된 위치를 예측 가능하게 설정할 수 있습니다.

요소가 변형되는 동안 동적 클래스를 추가하십시오. $('#elementId').addClass('transformed'). 그런 다음 CSS로 선언하십시오.

.translatX(@x) { 
     -webkit-transform: translateX(@X); 
             transform: translateX(@x);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

그때

#elementId { 
      -webkit-transform: none; 
              transform: none;
}

그때

.transformed {
    #elementId { 
        .translateX(@neededValue);
    }
}

이제 position : fixed 자식 요소에 top 및 z-index 속성 값이 제공되면 잘 작동하고 부모 요소가 변환 될 때까지 고정 상태를 유지합니다. 변환이 복귀되면 하위 요소가 다시 고정 된 것으로 나타납니다. 클릭하면 열리고 닫히는 탐색 사이드 바를 실제로 사용하고 페이지를 아래로 스크롤 할 때 고정되는 탭 세트가있는 경우 상황이 완화됩니다.

내 경우에는 transform : translateY () 전에 transform : translateX ()를 사용할 수 없다는 것을 알았습니다. 둘 다 사용하려면 transform : translate ()을 사용해야합니다.

정답은 아니기 때문에 투표하지 말고 변환을 끄는 빠른 방법이기 때문에 누군가를 도울 수 있습니다. 부모에 대한 변환이 실제로 필요하지 않고 고정 위치가 다시 작동하기를 원하는 경우 :

#element_with_transform {
  -webkit-transform: none;
  transform: none;
}