Фиксированные позиции не работают при использовании -webkit-transform - PullRequest
Новая
       54

Фиксированные позиции не работают при использовании -webkit-transform

147 голосов
/ 14 апреля 2010

Я использую -webkit-transform (и -moz-transform / -o-transform), чтобы вращать div. Также добавлено фиксированное положение, чтобы div прокручивал пользователя вниз.

В Firefox он работает нормально, но в браузерах на основе webkit он не работает. После использования -webkit-transform фиксированная позиция больше не работает! Как это возможно?

Ответы [ 14 ]

86 голосов
/ 21 июня 2016

Спецификация CSS Transforms объясняет это поведение. Элементы с преобразованиями действуют как содержащий блок для потомков с фиксированным положением, поэтому position: fixed под чем-то с преобразованием больше не имеет фиксированного поведения.

Они работают при применении к одному и тому же элементу; элемент будет позиционирован как фиксированный, а затем преобразован.

81 голосов
/ 14 апреля 2010

После некоторых исследований на веб-сайте Chromium об этой проблеме было сообщение об ошибке , поэтому браузеры Webkit не могут одновременно отображать эти два эффекта одновременно.

Я бы предложил добавить немного CSS для Webkit в вашу таблицу стилей, сделать преобразованный div изображением и использовать его в качестве фона. 

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

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

Так что сейчас вам придется делать это по старинке, пока браузеры Webkit не догонят FF.

РЕДАКТИРОВАТЬ: На 24.10.2012 ошибка не была решена.

Похоже, что это не ошибка, а аспект спецификации из-за двух эффектов, требующих отдельных систем координат и порядков наложения. Как объяснено в этом ответе .

7 голосов
/ 14 января 2014

Для тех, кто обнаруживает, что их фоновые изображения исчезают в Chrome из-за той же проблемы с background-attachment: исправлено; - это было мое решение: 

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

    });
}
6 голосов
/ 16 августа 2016

Август 2016 и фиксированная позиция и анимация / трансформация все еще остаются проблемой. Единственное решение, которое сработало для меня, - это создать анимацию для дочернего элемента, которая занимает больше времени.

3 голосов
/ 17 июля 2014

На самом деле я нашел другой способ исправить эту "ошибку":

У меня есть элемент контейнера, который содержит страницу с анимацией css3.Когда страница завершила анимацию, свойство css3 имеет значение: transform: translate (0,0) ;.Итак, я просто удалил эту строку, и все заработало как надо - position: fixed отображается правильно.Когда для перевода страницы применяется класс css, добавляется свойство translate и анимация 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/

3 голосов
/ 21 июля 2013

Что-то (немного странное), которое сработало для меня, это position:sticky вместо: 

.fixed {
     position: sticky;
}
1 голос
/ 13 февраля 2015

Возможно, из-за ошибки в Chrome, поскольку я не могу воспроизвести ни в Safari, ни в Firefox, но это работает в Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output

Это очень специфическая структура, поэтому она ни в коем случае не является универсально применимым однострочным исправлением CSS, но, возможно, кто-то может воспользоваться им, чтобы заставить его работать в Safari и Firefox.

1 голос
/ 07 апреля 2013

в моем проекте phonegap webkit transform -webkit-transform: translateZ (0); работал как шарм. Он уже работал в Chrome и Safari, а не в мобильном браузере. также может быть еще одна проблема - WRAPPER DIVs не завершены в некоторых случаях. мы применяем класс clear в случае плавающих DIV. 

<div class="Clear"></div> .Clear, .Clearfix{clear:both;}
1 голос
/ 06 марта 2013

Добавление -webkit-transform к фиксированному элементу решило проблему для меня. 

.fixed_element {
   -webkit-transform: translateZ(0);
   position: fixed;
   ....
}
0 голосов
/ 31 июля 2018

Добавление динамического класса при преобразовании элемента. $('#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);
    }
}

Положение «сейчас»: исправлено, если для дочернего элемента заданы значения свойств top и z-index, просто работают нормально и остаются неизменными до тех пор, пока родительский элемент не преобразуется. Когда преобразование отменено, дочерний элемент снова появляется как исправлено. Это должно облегчить ситуацию, если вы фактически используете боковую панель навигации, которая включает и закрывает при щелчке, и у вас есть набор вкладок, который должен оставаться липким при прокрутке страницы.

Страница:
...