Справочная информация Фиксированный Google Chrome

В настоящее время на Firefox и Safari background-attachment: fixed свойство работает, но не отвечает на Chrome.Справочная информация Фиксированный Google Chrome

Вот страница, которая работает в FF & Safari http://prestonmcpeak.com/work/enigma.html

Это желаемый эффект я ищу, которая работает во всех трех браузерах: http://codyhouse.co/demo/alternate-fixed-scroll-background/index.html

У меня есть ощущение, что это имеет делать с тегом позиции где-то на странице.

 <section class="project-header "> 
     <div class="project-background show-for-large-up"></div> 
     <section class="enigma"></section> 
     </section> 

     .project-header { 
      section { 
       position: fixed; 
       height: 100%; 
       width: 100%; 
       top: 0; 
       left: 0; 
       z-index: -1; 
       &.enigma { 
        background-size: contain; 
        background-attachment: fixed; 
       } 
      } 
     .project-background { 
      padding: 20% 0; 
      margin: 0; 
     } 
     .enigma { 
      background: url(../assets/img/enigma-1-m.jpg) no-repeat center top; 
     }

источник

2015-04-04 Preston McPeak

У меня есть ощущение, что вы должны дать нам, что ваш текущий код и что вы делали ... На данный момент я могу просто сказать вам, что вы должны попытаться установить свойство 'position' элемента как' static'. –

В чем вопрос? Объясните разницу между рабочим и нерабочим – vitdes

@vitdes on firefox фон остается фиксированным, поскольку он прокручивается, на хроме изображение перемещается со страницей. –

Хорошо, я думаю, что знаю, в чем проблема. У кого-то на форуме CSS-Tricks была такая же проблема.

Проблема заключается в использовании -webkit-transform на одном из родительских элементов из div, на который применяется фиксированный фон.

Чтобы решить эту проблему, вам необходимо удалить -webkit-transform из раздела с именем класса «main-section».

Так что:

.main-section { 
-webkit-transform: translate3d(0,-45px,0); 
    margin-bottom: -45px; 
}

Должно выглядеть так:

.main-section { 
    margin-bottom: -45px; 
}

мне удалось повторить и исправить эту проблему на URL Энигма вы предоставили. Пожалуйста, дайте мне знать, если это исправляет проблему для вас.

источник

2015-04-05 01:20:12 igorM

Splendid! Вы нашли недостающее звено. Я загружаю фундамент, и это был стиль по умолчанию из их CSS, спасибо, что поймал это! –

Раздражает это, похоже, так. В моем случае мне действительно пришлось удалить все стили 'transform: translate3d (...)', даже те, которые не были родительскими элементами того, у кого фиксированное фоновое изображение. – zelanix

Простой способ использования Javascript. Поскольку это проблема именно в браузерах, использующих Webkit layout engine (Chrome, Safari, Yandex и т.д.), вы можете создать условие, чтобы изменить background-attachment свойство в этих браузерах:

if($.browser.webkit) 
    $(".project-header section.enigma").css('background-attachment', 'scroll');

Это для JQuery, но если вы предпочитаете чистым Javascript условие будет:

if(~navigator.userAgent.toLowerCase().indexOf("webkit"))

Это решило проблему для моего (slick) слайдера, который использует transform: translate3d(...) в родительском элементе всех слайдов. Так как я также хотел, чтобы он менял фон с свойством background-size: cover на каждом слайде, это было наиболее эффективным решением.

источник

2015-07-30 13:20:49 Armfoot

Справочная информация Фиксированный Google Chrome

ответ

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