-webkit-transform Запрещает страницу с загрузки

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

CSS с webkit-transform:

 #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).

    Ты пробовал?

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

    или:

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

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

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

    Давайте будем гением компьютера.