-webkit-transform Предотвращает загрузку страницы

У меня возникла проблема с фоновым изображением, которое неправильно отображалось на iPad. Предоставленный ответ, который действительно решил проблему, состоял в том, чтобы добавить -webkit-transform: translateZ(0); к id, что решило проблему, но вызвало другую. На одной странице (это очень длинная страница) содержимое перестает загружаться на половине страницы. Если я удалю -webkit-transform: translateZ(0);, проблема исчезнет (проблема с фоном также появится снова). Почему -webkit-transform: translateZ(0); не позволяет загрузить страницу?

CSS с преобразованием webkit:

#wrap {  
  margin:0 auto; 
  position:relative; 
  padding:0; 
  background: #B3B1B2 url(/images/bgs/parchment2.jpg);
  -webkit-transform: translateZ(0); 
}

Примечания:

  • Это происходит на iPad Mini под управлением iOS 6.1.3.
  • Эта проблема не появляется на iPhone 4 (та же версия iOS) или в Chrome.
  • Это вызывает серьезные проблемы в Safari 5.1 (у меня Windows).

ios css safari webkit webkit-transform
person L84    schedule 07.06.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Ты пытался?

#wrap {
    margin:0 auto;
    position:relative;
    padding:0;
    background: #B3B1B2 url(/images/bgs/parchment2.jpg);
    -webkit-transform: translate3D(0, 0, 0); 
}

or:

#wrap {
    margin:0 auto;
    position:relative;
    padding:0;
    background: #B3B1B2 url(/images/bgs/parchment2.jpg);
    -webkit-transform: translate(0, 0); 
}
person Graham Robertson    schedule 09.06.2013
comment
-webkit-transform: translate(0, 0); предотвращает странные проблемы с загрузкой. -webkit-transform: translate3D(0, 0, 0); останавливает полную загрузку длинных страниц. Однако -webkit-transform: translate(0, 0);, похоже, не решает проблему, которая возникла у меня изначально из моего исходного вопроса. - person L84; 09.06.2013

arrow_upward
0
arrow_downward

Чтобы решить эту проблему с рендерингом, мне пришлось активировать аппаратное ускорение для других элементов на странице, которые оборачивали контент. В случаях с этим сайтом это было #main-content и #footer.

Этот сайт подал мне идею попробовать ускорить другие элементы на странице, и это сработало!

person L84    schedule 09.06.2013