Я использую -webkit-transform (и -moz-transform/-o-transform), чтобы повернуть div. Также добавьте фиксированную позицию, чтобы div прокручивался вместе с пользователем.
В Firefox он отлично работает, но в браузерах, основанных на webkit, он сломан. После использования -webkit-преобразования фиксированное положение больше не работает! Как это возможно?
После некоторых исследований на отчет об ошибке i1 > об этой проблеме, пока браузеры 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.
EDIT: по состоянию на 10/24/2012 ошибка не была решена.
Это, как представляется, не является ошибкой, а аспектом спецификации из-за двух эффектов, требующих отдельных систем координат и порядков укладки. Как объясняется в этом ответе.
CSS Transforms spec объясняет это поведение. Элементы с преобразованиями действуют как содержащий блок для потомков фиксированной позиции, поэтому положение: фиксированное под чем-то с преобразованием больше не имеет фиксированного поведения.
Они работают, когда применяются к одному элементу; элемент будет помещен как фиксированный, а затем преобразован.
Для тех, кто находит, что их фоновые изображения исчезают в Chrome из-за той же проблемы с фоновой привязкой: fixed; - это было мое решение:
// 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 y position
$(window).scroll(function(){
scrollTop = $(window).scrollTop();
photoTop = $('.imagebg').offset().top;
distance = (photoTop - scrollTop);
$('.imagebg').css('background-position', 'center ' + (distance*-1) + 'px');
});
}
Август 2016 года, а фиксированная позиция и анимация/преобразование все еще являются проблемой. Единственное решение, которое сработало для меня - это создать анимацию для дочернего элемента, которая занимает больше времени.
Что-то (немного взломанное), которое сработало для меня, вместо position:sticky:
.fixed {
position: sticky;
}
На самом деле я нашел другой способ исправить эту "ошибку":
У меня есть элемент контейнера, который содержит страницу с анимацией 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);
}
Добавление -webkit-transform к фиксированному элементу решило проблему для меня.
.fixed_element {
-webkit-transform: translateZ(0);
position: fixed;
....
}
в моем проекте телефонного разговора трансляция webkit -webkit-transform: translateZ (0); работал как шарм. Он уже работал в хроме и сафари, а не в мобильном браузере. также может быть еще одна проблема: WRAPPER DIVs не завершены в некоторых случаях. мы применяем четкий класс в случае плавающих 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, но, возможно, кто-то может поработать с ним, чтобы заставить его работать в Safari и Firefox.
Вот что работает для меня на всех проверенных браузерах и мобильных устройствах (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>
Пожалуйста, не голосуйте, потому что это не точный ответ, но может помочь кому-то, потому что это быстрый способ просто отключить трансформацию. Если вам действительно не нужно преобразование родителя, и вы хотите, чтобы ваше фиксированное положение снова работало:
#element_with_transform {
-webkit-transform: none;
transform: none;
}
Если вы можете использовать javascript в качестве опции, это может быть обходным путем для позиционирования фиксированного элемента position, относящегося к окну, когда он находится внутри преобразованного элемента:
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);
}
}
Теперь позиция: фиксированная при наличии значений свойства top и z-index для дочернего элемента просто отлично работает и остается фиксированной до тех пор, пока родительский элемент не преобразуется. Когда преобразование возвращается, дочерний элемент снова появляется как фиксированный. Это должно облегчить ситуацию, если вы на самом деле используете боковую панель навигации, которая переключает открытые и закрывающиеся по щелчку, и у вас есть вкладка, которая должна оставаться липкой при прокрутке вниз по странице.
У меня была эта проблема, когда я пытался реализовать ответный цвет с помощью реагирующих смахиваний (rsw). Проблема для меня заключалась в том, что rsw применяет translate(-100%, 0) к панели вкладок, которая нарушает стандартную фиксированную позицию div, добавленную на весь экран, которая при нажатии закрывает модель палитры цветов.
Для меня решение состояло в том, чтобы применить противоположное преобразование к фиксированному элементу (в данном случае translate(100%, 0), который исправил мою проблему. Я не уверен, что это полезно в других случаях, но думал, что поделюсь в любом случае.
Вот пример, показывающий то, что я описал выше: