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

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

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

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

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

Ответы [ 14 ]

0 голосов
/ 11 августа 2017

Если вы можете использовать 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 будет рассчитывать его на основе его контейнера.Это зависит от вашего варианта использования, но это позволит вам предсказуемо установить фиксированное положение чего-либо независимо от его контейнера.

0 голосов
/ 08 августа 2017

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

#element_with_transform {
  -webkit-transform: none;
  transform: none;
}
0 голосов
/ 23 июня 2015

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

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

<div style='-.*-transform:scale(2)'>
      <div style='position:fixed'>...</div> // broken
</div>
0 голосов
/ 14 мая 2015

Вот что мне подходит на всех протестированных браузерах и мобильных устройствах (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%);
}
Страница:
...