Iframe scrolling iOS 8

У меня есть iframe, и мне нужно, чтобы он имел прокручивающееся переполнение. кажется, работает на рабочем столе, я использовал работу, чтобы заставить ее работать в iOS. теперь он работает на Android и iOS. однако iOS8 он терпит неудачу.Iframe scrolling iOS 8

<html> 
    <body> 
    <style type="text/css"> 
     .scroll-container { 
     overflow: scroll; 
     -webkit-overflow-scrolling: touch; 
     } 
    #iframe_survey { 
     height: 100%; 
    } 

    .scroll-container { 
    height: 100%; 
    width: 100%; 
    overflow: scroll; 
    } 
    </style> 

    <div class="scroll-container scroll-ios"> 
    <iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe> 
    </div> 
    </body>

источник

2014-09-25 Adrian Mojica

Имеют ту же проблему, iOS8 испортили что-то действительно плохое –

ли это Safari или приложение UIWebView? –

сафари для iOS8 @ReigoHein –

Не зная, что находится на другом конце "www.iframe.com" ... но для меня, в CSS этого файла я добавил:

body { 
    position: relative; 
    z-index: 1; 
    width: 100%; 
    height: 100%; 
}

Это неподвижная Это.

источник

2014-10-01 21:15:51

да, фиксирует его, если у вас есть доступ к iframe css. если вы этого не сделаете. ответа по-прежнему нет. –

Используйте код таким образом

<div style="overflow:auto;-webkit-overflow-scrolling:touch"> 
    <iframe style="width:100%;height:600px" src="www.iframe.com"></iframe> 
</div>

источник

2014-10-04 02:56:30

Это лучшее решение, для меня он работает в ios8, но он может иметь проблемы с рендерингом, когда высота iframe больше, чем высота тела. См. Здесь более подробное объяснение: http://dev.magnolia-cms.com/blog/2012/05/strategies-for-the-iframe-on-the-ipad-problem/ – Miquel

Основное отличие заключается в использовании 'overflow : auto' вместо 'overflow: scroll'? Это не работает для меня. – althaus

Это не работает для меня с iOS 8 – user2218399

Вы должны использовать по стилю тела или переполнения: прокрутки;

Или использовать

<div style="width:100%;height:600px;overflow:auto;-webkit-overflow-scrolling:touch"> 
<iframe style="overflow:scroll;" src="www.iframe.com"></iframe> 
</div>

источник

2014-10-06 05:34:39

Там ошибка в прошивке 8, что нарушает прокрутку все вместе, когда -webkit-переполнение прокрутки: прикосновение было применено ко всему, что переполненно.

Взгляните на вопрос я отправил несколько недель назад: -webkit-overflow-scrolling: touch; breaks in Apple's iOS8

источник

2014-10-27 15:32:31

он не работает для меня! но я мог придумать небольшой трюк после прочтения этого сообщения: https://css-tricks.com/forums/topic/scrolling-iframe-on-ipad/

Просто положите! важно после этого и работает просто отлично!

-webkit-overflow-scrolling: touch !important; 
overflow-y: scroll !important;

источник

2015-03-09 14:12:11

Я был в состоянии сделать IFrame свиток прошивки, помещая iframe внутри div (который выступает в качестве контейнера) и применить стили следующим образом, и это работает прекрасно.

.iframe { 
    overflow: scroll !important; 
    width: 100%; 
    height: 100%; 
    border: none; 
} 

.div { 
    overflow: hidden; 
    width: 100%; 
    height: 100%; 
    border: none; 
    background-color: #FFF; 
}

Поскольку я работаю в GWT, для людей GWT это предложение. В случае GWT просто поместите iframe в ScrollPanel (div) и примените стили, как указано выше.

источник

2015-03-17 16:04:21

welcome @ user3548310, для вашего следующего сообщения я рекомендую вам прочитать: http://stackoverflow.com/editing-help – AdrieanKhisbe

Для того, чтобы сделать IFrame прокручивать на прошивке, вы должны добавить свойство CSS3 -webkit-overflow-scrolling: touch родительского контейнера:

<div style="overflow:auto;-webkit-overflow-scrolling:touch"> 
    <iframe src="./yxz" style="width:100%;height:100%"> 
</div>

источник

2015-10-07 13:43:36 gem007bd

Это должно быть явно принятым ответом – blackhawk

Да, это решение решило проблему. TQ. – mjb

я, наконец, получил мою работу после многих часов и тестирования. В основном то, что сработало для меня, было (показано как встроенный стиль для демонстрации). Выполнение автоматического переполнения внешнего div не позволяет отображать дополнительный набор полос прокрутки на рабочих столах.

<div style="overflow: auto!important; -webkit-overflow-scrolling: touch!important;"> 
    <iframe src="http://www.mywebsiteurl.com" style="width: 100%; height: 600px; display: block; overflow: scroll; -webkit-overflow-scrolling: touch;" ></iframe> 
</div>

источник

2016-01-23 19:29:31

«Создание внешнего переполнения div не позволяет отображать дополнительный набор полос прокрутки на рабочих столах». И вот, спасибо, спасибо! Для меня, собственно, 'overflow: auto; -webkit-overflow-scrolling: touch; 'на обертке и' display: block' на iframe было достаточно. – bencergazda

сусло определить ваш scroll-container в fixed для сНу является полноэкранным размером. Затем внутри iframe создайте основной контент, у которого есть прокрутка свойств.

Внутри вы Iframe в mainContainer-scroll, вы можете добавить:

-webkit-overflow-scrolling: touch // Для активной гладкой прокрутки
-webkit-transform: translate3d(0, 0, 0) // Для ускорения материала
overflow-y:scroll; // Для оных прокручивается у ось
position:absolute;height:100%;width:100%;top:0;left:0; // Для крепления контейнера

Главная

<html> 
    <head> 
     <style type="text/css"> 
      #iframe_survey { 
       height: 100%; 
      } 

      .scroll-container { 
       height: 100%; 
       width: 100%; 
       position:fixed; 
      } 
     </style> 
    </head> 
    <body> 
     <div class="scroll-container scroll-ios"> 
      <iframe id="iframe_survey" src="www.iframe.com" style="border:0px #FFFFFF none;" name="myiFrame" frameborder="0" marginheight="0px" marginwidth="0px" width="100%"></iframe> 
     </div> 
    </body> 
</html>

Внутри Iframe

<div class="mainContainer-scroll" style="position:absolute;height:100%;width:100%;top:0;left:0;-webkit-overflow-scrolling: touch;-webkit-transform: translate3d(0, 0, 0);overflow-y:scroll;"> 
    <div class="Content" style="height:2000px;width:100%;background:blue;"> 
    </div> 
</div>

источник

2017-02-15 11:25:55

Iframe scrolling iOS 8

ответ

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