-webkit-transform을 사용하면 위치가 고정되지 않습니다.

-webkit-transform을 사용하면 위치가 고정되지 않습니다.

div를 회전시키기 위해 -webkit-transform (및 -moz-transform / -o-transform)을 사용하고 있습니다.또한 사용자와 함께 div를 아래로 스크롤할 수 있도록 위치를 고정하였습니다.

파이어폭스에서는 잘 작동하지만 웹킷 기반 브라우저에서는 고장이 납니다.-webkit-transform을 사용하면 고정된 위치가 더 이상 작동하지 않습니다!어떻게 그것이 가능한가요?

CSS Transforms 사양은 이 동작을 설명합니다.변환이 있는 요소는 고정된 위치 하위 요소를 포함하는 블록으로 작동하므로 위치: 변환이 있는 항목 아래에 고정된 요소는 더 이상 고정된 동작을 갖지 않습니다.

이들은 동일한 요소에 적용되면 작동합니다. 요소는 고정된 상태로 배치된 다음 변형됩니다.

몇 가지 연구 끝에 크롬 웹사이트에서 이 문제에 대한 버그 보고가 있어 지금까지 웹킷 브라우저는 이 두 가지 효과를 동시에 렌더링할 수 없습니다.

저는 당신의 스타일시트에 CSS만 웹킷을 추가하고 변형된 디바 이미지를 만들어서 배경으로 사용하는 것을 제안합니다.

@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일 현재 버그가 해결되지 않았습니다.

---

이것은 버그가 아니라 별도의 좌표계와 적층 순서가 필요한 두 가지 효과 때문에 본 명세서의 한 측면으로 보입니다.이 답변에서 설명한 바와 같이.

position:sticky대신:

.fixed {
     position: sticky;
}

배경 첨부 파일과 같은 문제로 인해 크롬에서 배경 이미지가 사라지는 것을 발견한 사람은 누구나 가능합니다. 수정됨; - 이것이 제 해결책이었습니다.

// 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');

    });
}  

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/

react-reactable-view(rsw) 구현하려다가 react-color 이 발생했습니다 문제가 를 로 swipe 발생했습니다 문제가 react 구현하려다가 이 - 를 -는rswaps이었습니다를 적용하는 였습니다.translate(-100%, 0)클릭하면 색상 선택기 모델이 닫히는 전체 화면 위에 추가된 기본 고정 위치 div를 깨는 탭 패널로 이동합니다.

이 경우 을 하는 이었습니다 에 이었습니다 하는 )에 반대 변환을 적용하는 것이었습니다.translate(100%, 0)하려고 생각했습니다이것이 다른 경우에 유용한지는 모르겠지만 어쨌든 공유하려고 생각했습니다.

위에서 설명한 내용을 보여주는 예는 다음과 같습니다.

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

내 폰갭 프로젝트에서 웹킷 변형 - 웹킷 변형 : 번역 Z(0); 매력적으로 작동했습니다.모바일 브라우저가 아닌 크롬과 사파리에서도 이미 작동하고 있었습니다.WRAPPER DIV가 완료되지 않은 경우도 있습니다.유동 DIV의 경우 클리어 클래스를 적용합니다.

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

사파리나 파이어폭스에서 복제할 수 없기 때문에 Chrome의 버그 때문일 수도 있지만 이것은 Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output 에서 작동합니다.

그것은 매우 특정한 구조이므로 보편적으로 적용 가능한 한 줄짜리 CSS 수정은 결코 아닙니다. 하지만 아마도 누군가가 사파리와 파이어폭스에서 작동하도록 수정할 수 있을 것입니다.

그냥 덧붙였어요.transform: unset;내 머리에 고정된 머리말을 해주었는데, 그게 나한테 효과가 있었어요!

저도 넥스트.js로 framer motion을 사용하고 있는데 제 고정 헤더에도 같은 문제가 있어서 쉽게 고칠 수 있을 것 같습니다.

.header {
    position: fixed;
    transform: unset;
}

를 를 으로 으로 설정transform:unset;저를 위해 일하고 있습니다.

React로 작업하면 Portal에서 요소를 고정된 위치로 감쌀 수 있습니다. 이렇게 하면 잘 작동합니다.

하기 추가하기-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>

javascript를 옵션으로 사용할 수 있다면 변환된 요소 안에 있을 때 창과 관련된 위치 고정 요소를 배치하는 방법이 될 수 있습니다.

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

이제 위치: 자식 요소에 상위 및 z 인덱스 속성 값이 제공되면 고정됩니다. 부모 요소가 변환될 때까지 고정된 상태로 잘 작동합니다.변환을 되돌리면 하위 요소가 다시 고정된 상태로 팝업됩니다.클릭 시 열기 및 닫기를 전환하는 탐색 사이드바를 실제로 사용하고 있고 페이지를 스크롤할 때 끈적임이 유지되는 탭 세트가 있다면 상황을 완화할 수 있습니다.

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

모든 번역이 원래 위치로 돌아가는 경우0, 당신이 설정한 곳에서 이 솔루션을 사용할 수 있습니다.transform: unset;:

  100% {
    opacity: 1;
    visibility: visible;
    /* Use unset to allow fixed elements instead of translate3d(0, 0, 0) */
    transform: unset;
  }

React를 사용하는 경우 ReactDOM.createPortal을 사용할 수 있습니다.

팁은 돈코펙이 주는데 이게 뭔지 알아내는데 시간이 좀 걸렸습니다.제가 발견한 것은 이렇습니다.

ReactDOM.createPortal로 래핑된 구성 요소를 반환하면 두 번째 인수로 상위 요소를 설정할 수 있으며, React는 해당 구성 요소를 해당 주어진 요소에 추가하므로 예제position: fixed변형된 구성 요소의 자식으로서도 괜찮을 겁니다

import ReactDOM from "react-dom";


const MyModal = () => {
    return ReactDOM.createPortal(
       <div style={{position: "fixed", top: "0", left: "0", 
                    background: "white", color: "black", 
                    padding: "3rem", zIndex: "50000"}}>
         Modal Element
       </div>,
       document.body
    )

}

이 경우 React는 이 구성 요소를 상위 구성 요소의 하위 구성 요소가 아닌 본문의 하위 구성 요소로 렌더링합니다.

이것은 정확한 답이 아니라 단지 변신을 끄는 빠른 방법이기 때문에 누군가에게 도움이 될 수도 있기 때문에 투표하지 말아주세요.부모에 대한 변환이 정말로 필요하지 않고 고정된 위치가 다시 작동하기를 원하는 경우:

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

언급URL : https://stackoverflow.com/questions/2637058/position-fixed-doesnt-work-when-using-webkit-transform