Я использую -webkit-transform (и -moz-transform / -o-transform), чтобы вращать div. Также добавлено фиксированное положение, чтобы div прокручивал пользователя вниз.
В Firefox он работает нормально, но в браузерах на основе webkit он не работает. После использования -webkit-transform фиксированная позиция больше не работает! Как это возможно?
html
css
positioning
rotation
iSenne
источник
источник
Ответы:
После некоторых исследований на веб-сайте Chromium появилось сообщение об ошибке , поэтому браузеры Webkit не могут одновременно визуализировать эти два эффекта.
Я бы предложил добавить немного CSS для Webkit в вашу таблицу стилей и сделать преобразованный div изображением и использовать его в качестве фона.
Так что сейчас вам придется делать это по старинке, пока браузеры Webkit не догонят FF.
РЕДАКТИРОВАТЬ: По состоянию на 24.10.2012 ошибка не была решена.
Похоже, что это не ошибка, а аспект спецификации из-за двух эффектов, требующих отдельных систем координат и порядков наложения. Как объяснено в этом ответе .
источник
Спецификация CSS Transforms объясняет это поведение. Элементы с преобразованиями действуют как содержащий блок для потомков с фиксированным положением, поэтому position: fixed под чем-то с преобразованием больше не имеет фиксированного поведения.
Они работают при применении к одному и тому же элементу; элемент будет позиционирован как фиксированный, а затем преобразован.
источник
Для тех, кто находит фоновые изображения, исчезают в Chrome из-за той же проблемы с background-attachment: исправлено; - это было мое решение:
источник
Что-то (немного странное), которое сработало для меня, заключается в следующем
position:sticky
:источник
Август 2016 и фиксированная позиция и анимация / трансформация все еще остаются проблемой. Единственное решение, которое сработало для меня, - это создать анимацию для дочернего элемента, которая занимает больше времени.
источник
На самом деле я нашел другой способ исправить эту «ошибку»:
У меня есть элемент контейнера, который содержит страницу с анимацией CSS3. Когда страница завершила анимацию, свойство css3 имеет значение: transform: translate (0,0) ;. Итак, я просто удалил эту строку, и все заработало как надо - position: fixed отображается правильно. Когда для перевода страницы применяется класс css, добавляется свойство translate и анимация css3 также работает.
Пример:
Демо: http://jsfiddle.net/ZWcD9/
источник
в моем проекте phonegap преобразование webkit -webkit-transform: translateZ (0); работал как шарм. Он уже работал в Chrome и Safari, а не в мобильном браузере. также может быть еще одна проблема - WRAPPER DIVs не завершены в некоторых случаях. мы применяем чистый класс в случае плавающих DIV.
источник
Возможно, из-за ошибки в Chrome, поскольку я не могу воспроизвести в Safari и Firefox, но это работает в Chrome 40.0.2214.111 http://jsbin.com/hacame/1/edit?html,css,output
Это очень специфическая структура, поэтому она ни в коем случае не является универсально применимым однострочным исправлением CSS, но, возможно, кто-то может воспользоваться им, чтобы заставить его работать в Safari и Firefox.
источник
У меня была эта проблема, когда я пытался реализовать ответный цвет с помощью реагирующих смахиваний (rsw). Проблема для меня заключалась в том, что RSW применяется
translate(-100%, 0)
к панели вкладок, которая нарушает стандартную фиксированную позицию div, добавленную на весь экран, которая при нажатии закрывает модель палитры цветов.Для меня решение было применить противоположное преобразование к фиксированному элементу (в этом случае
translate(100%, 0)
это решило мою проблему. Я не уверен, полезно ли это в других случаях, но думал, что поделюсь в любом случае.Вот пример, показывающий то, что я описал выше:
https://codepen.io/relativemc/pen/VwweEez
источник
Добавление
-webkit-transform
к фиксированному элементу решило проблему для меня.источник
translateZ(0)
НЕ работает. Это правда, что иногда это работает, я видел случаи, когда это работало. Но я все еще не могу сузить это.Вот что работает для меня на всех протестированных браузерах и мобильных устройствах (Chrome, IE, Firefox, Safari, iPad, iphone 5 и 6, Android).
источник
источник
Если вы можете использовать javascript в качестве опции, это может быть обходной путь для позиционирования фиксированного элемента позиции относительно окна, когда он находится внутри преобразованного элемента:
Конечно, вам также нужно будет отрегулировать ваши высоты и ширину, потому что
fixedEl
вы будете рассчитывать их на основе своего контейнера. Это зависит от вашего варианта использования, но это позволит вам предсказуемо установить фиксированное положение чего-либо, независимо от его контейнера.источник
Добавьте динамический класс, пока элемент трансформируется.
$('#elementId').addClass('transformed')
, Затем продолжайте объявлять в CSS,затем
затем
Теперь положение: исправлено, если для дочернего элемента заданы значения свойств top и z-index, просто работают нормально и остаются неизменными, пока родительский элемент не преобразуется. Когда преобразование отменено, дочерний элемент снова появляется как исправлено. Это должно облегчить ситуацию, если вы на самом деле используете боковую панель навигации, которая включает и закрывает при щелчке, и у вас есть набор вкладок, который должен оставаться липким, когда вы прокручиваете страницу вниз.
источник
в моем случае я обнаружил, что мы не можем использовать transform: translateX () перед transform: translateY (). если мы хотим использовать оба, мы должны использовать transform: translate (,).
источник
Пожалуйста, не голосуйте, потому что это не точный ответ, но может помочь кому-то, потому что это быстрый способ просто отключить преобразование. Если вам действительно не нужно преобразование для родителя, и вы хотите, чтобы ваша фиксированная позиция снова заработала:
источник