Các vị trí cố định không hoạt động khi sử dụng -webkit-Transform

Tôi đang sử dụng -webkit-Transform (và -moz-Transform / -o-Transform) để xoay div. Cũng có vị trí cố định được thêm vào để div giảm bớt với người dùng.

Trong Firefox, nó hoạt động tốt, nhưng trong các trình duyệt dựa trên webkit thì nó bị hỏng. Sau khi sử dụng biến đổi -webkit, vị trí cố định không hoạt động nữa! Làm thế nào là có thể?

Sau một số nghiên cứu, đã có một báo cáo lỗi trên trang web Chromium về vấn đề này, cho đến nay các trình duyệt Webkit không thể kết xuất hai hiệu ứng này cùng một lúc.

Tôi sẽ đề nghị thêm một số Webkit chỉ CSS vào biểu định kiểu của bạn và làm cho div được chuyển đổi thành hình ảnh và sử dụng nó làm nền.

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

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

Vì vậy, bây giờ bạn sẽ phải làm theo cách cũ, cho đến khi trình duyệt Webkit bắt kịp FF.

EDIT: Kể từ ngày 24/10/2012, lỗi vẫn chưa được khắc phục.

Điều này dường như không phải là một lỗi, nhưng là một khía cạnh của đặc tả do hai hiệu ứng đòi hỏi các hệ tọa độ riêng biệt và các lệnh xếp chồng. Như đã giải thích trong câu trả lời này .

Đặc tả CSS Transforms giải thích hành vi này. Các phần tử với các phép biến đổi đóng vai trò là một khối chứa cho các hậu duệ vị trí cố định, do đó, vị trí: cố định dưới một cái gì đó với một biến đổi không còn có hành vi cố định.

Họ làm việc khi áp dụng cho cùng một yếu tố; phần tử sẽ được định vị là cố định, và sau đó được chuyển đổi.

Đối với bất kỳ ai tìm thấy hình ảnh nền của họ đang biến mất trong Chrome vì cùng một vấn đề với tệp đính kèm nền: đã sửa; - đây là giải pháp của tôi:

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

    });
}  

Một cái gì đó (một chút hacky) làm việc cho tôi là để position:stickythay thế:

.fixed {
     position: sticky;
}

Tháng 8 năm 2016 và vị trí cố định & hoạt hình / biến đổi vẫn là một vấn đề. Giải pháp duy nhất hiệu quả với tôi - là tạo một hình ảnh động cho phần tử con mất nhiều thời gian hơn.

Trên thực tế tôi đã tìm thấy một cách khác để khắc phục "lỗi" này:

Tôi có phần tử container chứa trang với hình ảnh động css3. Khi trang hoàn thành hoạt ảnh, thuộc tính css3 có giá trị: Transform: translate (0,0);. Vì vậy, tôi chỉ cần loại bỏ dòng này và mọi thứ hoạt động như bình thường - vị trí: đã sửa được hiển thị đúng. Khi lớp css được áp dụng để dịch trang, thuộc tính dịch được thêm vào và hoạt ảnh css3 cũng hoạt động.

Thí dụ:

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

Bản trình diễn: http://jsfiddle.net/ZWcD9/

trên dự án phonegap của tôi, biến đổi webkit -webkit-Transform: translateZ (0); làm việc như người ở. Nó đã hoạt động trong chrome và safari chứ không phải trình duyệt di động. Ngoài ra, có thể có thêm một vấn đề nữa là WRAPPER DIV không được hoàn thành trong một số trường hợp. chúng tôi áp dụng lớp rõ ràng trong trường hợp DIV nổi.

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

Có thể do lỗi trong Chrome vì tôi không thể sao chép trong Safari cũng như Firefox, nhưng điều này hoạt động trong Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output

Đây là một cấu trúc rất đặc biệt vì vậy nó không phải là một bản sửa lỗi css có thể áp dụng phổ biến, nhưng có lẽ ai đó có thể sửa đổi nó để làm cho nó hoạt động trong Safari và Firefox.

Tôi đã gặp vấn đề này trong khi cố gắng thực hiện màu phản ứng với các khung nhìn phản ứng có thể vuốt (rsw). Vấn đề đối với tôi là rsw áp dụngtranslate(-100%, 0) cho bảng điều khiển tab phá vỡ vị trí cố định mặc định div được thêm trên toàn màn hình mà khi nhấp vào sẽ đóng mô hình bộ chọn màu.

Đối với tôi, giải pháp là áp dụng biến đổi ngược lại cho phần tử cố định (trong trường hợp này là translate(100%, 0) đã khắc phục sự cố của tôi. Tôi không chắc liệu điều này có hữu ích trong các trường hợp khác không nhưng tôi nghĩ tôi sẽ chia sẻ.

Đây là một ví dụ cho thấy những gì tôi đã mô tả ở trên:

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

Thêm -webkit-transformphần tử cố định đã giải quyết vấn đề cho tôi.

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

Đây là những gì hoạt động với tôi trên tất cả các trình duyệt và thiết bị di động đã thử nghiệm (Chrome, IE, Firefox, Safari, iPad, iphone 5 và 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%);
}

vị trí cố định của một phần tử bị phá vỡ nếu bạn áp dụng biến đổi cho bất kỳ tổ tiên nào.

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

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

Nếu bạn có thể sử dụng javascript làm tùy chọn thì đây có thể là một cách giải quyết để định vị một phần tử cố định vị trí có liên quan đến cửa sổ khi nó nằm trong phần tử được chuyển đổi:

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

Cấp cho bạn cũng sẽ phải điều chỉnh chiều cao và chiều rộng của bạn bởi vì fixedElsẽ tính toán nó dựa trên container của nó. Điều đó phụ thuộc vào trường hợp sử dụng của bạn nhưng điều này sẽ cho phép bạn dự đoán đặt vị trí một cái gì đó cố định, bất kể nó chứa gì.

Thêm một lớp động trong khi phần tử biến đổi. $('#elementId').addClass('transformed'). Sau đó tiếp tục khai báo trong css,

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

sau đó

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

sau đó

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

Vị trí hiện tại: cố định khi được cung cấp với các giá trị thuộc tính đỉnh và chỉ số z trên phần tử con chỉ hoạt động tốt và giữ cố định cho đến khi phần tử cha biến đổi. Khi chuyển đổi được hoàn nguyên, phần tử con bật lên như cố định một lần nữa. Điều này sẽ làm giảm bớt tình huống nếu bạn thực sự sử dụng một thanh bên điều hướng để bật và đóng khi nhấp chuột và bạn có một bộ tab sẽ giữ được độ dính khi bạn cuộn xuống trang.

trong trường hợp của tôi, tôi phát hiện ra rằng chúng ta không thể sử dụng biến đổi: translateX () trước khi biến đổi: translateY (). Nếu chúng ta muốn sử dụng cả hai, chúng ta nên sử dụng biến đổi: translate (,).

Xin đừng bỏ phiếu, vì đây không phải là câu trả lời chính xác, nhưng có thể giúp ai đó vì đó là cách nhanh chóng để tắt chuyển đổi. Nếu bạn thực sự không cần chuyển đổi trên cha mẹ và bạn muốn vị trí cố định của bạn hoạt động trở lại:

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