위치와 함께 작동하지 않는 'transform3d': 고정 하위

위치와 함께 작동하지 않는 'transform3d': 고정 하위

---

일반적인 CSS 환경에서 고정 div가 지정된 위치 ( top:0px, left:0px)에 정확하게 위치하는 상황이 있습니다 .

translate3d 변환이있는 부모가 있다면 이것은 존중되지 않는 것 같습니다. 뭔가 보이지 않습니까? 스타일 및 변형 원점 옵션과 같은 다른 웹킷 변환을 시도했지만 운이 없었습니다.

노란색 상자가 컨테이너 요소가 아닌 페이지 상단 모서리에있을 것으로 예상되는 예제와 함께 JSFiddle 을 첨부했습니다 .

아래에서 간단한 바이올린 버전을 찾을 수 있습니다.

#outer {
    position:relative; 
    -webkit-transform:translate3d(0px, 20px , 0px); 
    height: 300px; 
    border: 1px solid #5511FF; 
    padding: 10px;
    background: rgba(100,180,250, .8); 
    width: 80%;
}
#middle{
    position:relative; 
    border: 1px dotted #445511; 
    height: 300px; 
    padding: 5px;
    background: rgba(250,10,255, .6);
}
#inner {
    position: fixed; 
    top: 0px;
    box-shadow: 3px 3px 3px #333; 
    height: 20px; 
    left: 0px;
    background: rgba(200,180,80, .8); 
    margin: 5px; 
    padding: 5px;
}

<div id="container">
    Blue: Outer, <br>
    Purple: Middle<br>
    Yellow: Inner<br>
    <div id="outer"> 
        <div id="middle">
            <div id="inner">
                Inner block
            </div>
        </div>
    </div>
</div>

고정 위치 아동과 translate3d를 함께 사용하려면 어떻게해야합니까?

---

이는 W3C 사양에transform 따라 새로운 로컬 좌표계를 생성 하기 때문입니다 .

HTML 네임 스페이스 none에서 변환 이외의 값 은 스택 컨텍스트와 포함 블록을 모두 생성합니다. 객체는 고정 위치 자손의 포함 블록 역할을합니다.

이는 고정 위치가 뷰포트가 아닌 변환 된 요소에 고정됨을 의미합니다.

현재 내가 알고있는 해결 방법이 없습니다.

또한 Eric Meyer의 기사 : CSS 변환으로 고정 요소 고정 해제에 설명되어 있습니다.

---

페이지의 항목이 변환을 사용할 때 고정 된 상단 탐색 메뉴에서 깜박임이 발생했습니다. 상단 탐색 메뉴에 적용되는 다음 항목이 점프 / 깜박임 문제를 해결했습니다.

#fixedTopNav {
    position: fixed;
    top: 0;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

SO에 대한이 답변 덕분에

---

Bradoergo가 제안한 것처럼 창을 가져 와서 다음 scrollTop과 같이 절대 위치 상단에 추가하십시오.

function fix_scroll() {
  var s = $(window).scrollTop();
  var fixedTitle = $('#fixedContainer');
  fixedTitle.css('position','absolute');
  fixedTitle.css('top',s + 'px');
}fix_scroll();

$(window).on('scroll',fix_scroll);

어쨌든 이것은 나를 위해 일했습니다.

---

In Firefox and Safari you can use position: sticky; instead of position: fixed; but it will not work in other browsers. For that you need javascript.

---

In my opinion, the best method to deal with this is to apply the same translate, but break children that need to be fixed out of their parent (translated) element; and then apply the translate to a div inside the position: fixed wrapper.

The results look something like this (in your case):

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 

</div>
<div style='position: fixed; top: 0px; 
            box-shadow: 3px 3px 3px #333; 
            height: 20px; left: 0px;'>
    <div style='-webkit-transform:translate3d(0px, 20px, 0px);'>
        Inner block
    </div>
</div>

JSFiddle: https://jsfiddle.net/hju4nws1/

While this may not be ideal for some use cases, typically if you're fixing a div you probably could care less about what element is its parent/where it falls in the inheritance tree in your DOM, and seems to solve most of the headache - while still allowing both translate and position: fixed to live in (relative) harmony.

---

I ran across the same problem. The only difference is that my element with 'position: fixed' had its 'top' and 'left' style properties set from JS. So I was able to apply a fix:

var oRect = oElement.getBoundingClientRect();

oRect object will contain real (relative to view port) top and left coordinates. So you can adjust your actual oElement.style.top and oElement.style.left properties.

---

I have an off canvas sidebar that uses -webkit-transform: translate3d. This was preventing me from placing a fixed footer on the page. I resolved the issue by targeting a class on the html page that is added to the tag on initialization of the sidebar and then writing a css :not qualifier to state "-webkit-transform: none;" to the html tag when that class is not present on the html tag. Hope this helps someone out there with this same issue!

---

Try to apply opposite transform to the child element:

<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(-100%, 0px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>

---

Add a dynamic class while the element transforms.$('#elementId').addClass('transformed'). Then go on to declare in css,

.translat3d(@x, @y, @z) { 
     -webkit-transform: translate3d(@X, @y, @z); 
             transform: translate3d(@x, @y, @z);
      //All other subsidaries as -moz-transform, -o-transform and -ms-transform 
}

then

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

then

.transformed {
    #elementId { 
        .translate3d(0px, 20px, 0px);
    }
}

Now position: fixed when provided with a top and z-index property values on a child element just work fine and stay fixed until the parent element transforms. When the transformation is reverted the child element pops as fixed again. This should easen the situation if you are actually using a navigation sidebar that toggles open and closes upon a click, and you have a tab-set which should stay sticky as you scroll down the page.

---

One way to deal with this is to apply the same transform to the fixed element:

<br>
<div style='position:relative; border: 1px solid #5511FF; 
            -webkit-transform:translate3d(0px, 20px , 0px); 
            height: 100px; width: 200px;'> 
    <div style='position: fixed; top: 0px; 
                -webkit-transform:translate3d(0px, 20px , 0px); 
                box-shadow: 3px 3px 3px #333; 
                height: 20px; left: 0px;'>
        Inner block
    </div>
</div>

참고URL : https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children