Позиция: исправлено не работает в хроме, независимо от того, что

В настоящее время у меня есть навигация и слайд вниз Социальное меню в Сасс, которое фиксировано.Позиция: исправлено не работает в хроме, независимо от того, что

Однако, когда я прокручиваю вниз, в Chrome не происходит ничего. В Safari он работает.

Я гугл много раз, и даже когда я использую

-webkit-backface-visibility: hidden; 
-webkit-transform: translateZ(0); 
-webkit-transform: translate3d(0, 0, 0);

он все еще не работает.

Вот CSS код для моего социального меню (имеет ула и Ли в нем)

.social-menu{ 
    position:fixed; 
    top: 0; 
    bottom:0; 
    width:100%; 
    height:100vh; 
    z-index:10000; 
    -webkit-backface-visibility: hidden; 
-webkit-transform: translateZ(0); 
-webkit-transform: translate3d(0, 0, 0); 

    background-color:rgba(123, 123, 123, 0.86); 

    .social-list{ 
     width:50%; 
     margin:0 auto; 
     .social-list-item{ 
      list-style-type: none; 
     } 
    } 
}

Вот мой JSFiddle, мое социальное меню вложено в моем теле. Здесь он работает, может быть, попробуйте сами в хром?

Кроме того, я использую <!DOCTYPE html>

http://jsfiddle.net/777t4twf/7/

источник

2015-11-26 Fabian Tjoe A On

он выглядит исправно! проверьте свою скрипку ..! его работа даже на моей машине –

установить размер тела 0 в вашем css –

@ Deepak Я знаю, я упомянул, что он работает в моей скрипке. Но на моем сайте он не делает :( –

Если удалить transform-style: preserve-3d из body и -webkit-transform: translateZ(0); от .container он работает. Попробуйте в своем Chrome DevTools.

Я предполагаю, что эти преобразования (совершенно справедливо) влияют на положение nav в оси z.

body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    min-height: 100%; 
    /* -webkit-transform-style: preserve-3d; */ 
    /* transform-style: preserve-3d; */ 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

.container { 
    width: 100%; 
    background-color: #f1f1f1; 
    /* -webkit-transform: translateZ(0); */ 
}

источник

2015-11-26 10:55:14 Moob

Вау, большое спасибо, он наконец работает. Сохранить 3d был преступником! –

Попробуйте дать «transform: inherit» в вашем контейнере «social-menu». Я пробовал это и работал для меня, так как мой контейнерный элемент в хроме добавлял «transform: none» в вычисленный css инструментов dev.

источник

2017-11-10 05:37:48 user2353671

Позиция: исправлено не работает в хроме, независимо от того, что

ответ

Смежные вопросы