Виправлені позиції не працюють при використанні -webkit-перетворення

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

У Firefox він працює чудово, але у веб-браузерах, які працюють на веб-сайтах, він порушений. Після використання -webkit-трансформації фіксована позиція більше не працює! Як це можливо?

Після деяких досліджень на веб-сайті Chromium з’явився звіт про помилки щодо цієї проблеми, тому браузери Webkit не можуть одночасно рендер цих двох ефектів.

Я б запропонував додати кілька таблиць стилів 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.

EDIT: Станом на 24.10.2012 помилка не була усунена.

Здається, це не помилка, а аспект специфікації, зумовлений двома ефектами, що вимагають окремих систем координат та порядків укладання. Як пояснено у цій відповіді .

Специфікація CSS Transforms пояснює цю поведінку. Елементи з перетвореннями виконують роль блоку, що містить нащадків з фіксованою позицією, тому положення: закріплене під чим-небудь з перетворенням більше не має фіксованої поведінки.

Вони виконують роботу при застосуванні до одного елемента; елемент буде розташований як закріплений, а потім перетворений.

Для всіх, хто знайде їх фонові зображення, зникають у Chrome через одну і ту ж проблему з фоновим вкладеним файлом: виправлено; - це було моє рішення:

// 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 року та виправлена ​​позиція та анімація / трансформація залишаються проблемою. Єдине рішення, яке працювало для мене - було створити анімацію для дочірнього елемента, яка займає більше часу.

Насправді я знайшов інший спосіб виправити цю "помилку":

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

у моєму проекті fonegap перетворення webkit -webkit-transform: translateZ (0); працював як шарм. Він уже працював у chrome та safari, тільки не мобільний браузер. також може виникнути ще одне питання - WRAPPER DIV не завершені в деяких випадках. ми застосовуємо чіткий клас у випадку плаваючих DIV.

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

Можливо, через помилку в Chrome, оскільки я не можу копіювати в Safari чи Firefox, але це працює в Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output

Це дуже особлива структура, тому це аж ніяк не універсально застосований односкладений файл css fix, але, можливо, хтось може поцікавитися, щоб він працював у Safari та Firefox.

У мене виникла ця проблема, намагаючись реалізувати колір реагування за допомогою перегляду реакцій (rsw). Проблема для мене полягала в тому, що rsw застосовується translate(-100%, 0)до панелі вкладок, яка розбиває встановлену за замовчуванням діву позицію, додану на весь екран, яка при натисканні закриває модель вибору кольору.

Для мене рішенням було застосувати протилежне перетворення до фіксованого елемента (у цьому випадку 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>

Якщо ви можете використовувати 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 () перед трансформацією: translateY (). Якщо ми хочемо використовувати обидва, ми повинні використовувати transform: translate (,).

Будь ласка, не голосуйте, бо це не точна відповідь, але може допомогти комусь, оскільки це швидкий спосіб просто відключити трансформацію. Якщо вам справді не потрібна трансформація на батьківському рівні, і ви хочете, щоб ваше фіксоване положення знову працювало:

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