Mobile Safari - фиксированный контент iframe

Question

Mobile Safari заставляет фреймы соответствовать их размеру контента.

Поэтому, когда внутри фрейма есть фиксированный div, он не исправляется.Есть ли свойство CSS, чтобы заставить iframe прокручивать в мобильном и соблюдать фиксированный контент?

Примечание : фиксированный контент находится внутри iframe, а не в контейнере, поэтому прокрутка div не будетисправить это.

<iframe src="page-with-fixed-content" style="width: 100%; height: 100%;">
    <!-- Fixed layer on the page loaded to iframe -->
    <div style="position: fixed; top:0;">
        Not Fixed on iPhone (Fixed on desktop)
    </div>
</iframe>

Пример CodePan

Answer 1

добавление transform: translate3d(0,0,0); к элементу фиксированной позиции.

div {
  position: fixed;
  transform: translate3d(0,0,0);
}

Answer 2

С выпуском iOS 5 в MobileSafari, как говорят, поддерживается фиксированное расположение.

Поддерживаемое слово нужно воспринимать с большой долей соли, потому что есть все виды проблем, которые я намереваюсь решитьпокажу вам в следующем посте.

Обратите внимание, что я подал ошибки для ряда из них во время бета-тестирования iOS 5 - но бог знает, как работает Radar Apple, поэтому я не знаю номера проблемы,https://remysharp.com/2012/05/24/issues-with-position-fixed-scrolling-on-ios/ Как это исправить?Легко.Поиск StackOverflow.Этот вопрос задавался ранее:

позиция: исправлено, не работает на iPad и iPhone
Исправлено позиционирование в Mobile Safari

Answer 3

Исправлен ли ваш iframe?

iframe{
   position:fixed;
   top:0;
   right:0;
   bottom:0;
   left:0;
   width:100%;
   height:100%;
   overflow:auto;
}

Answer 4

Я столкнулся с этой проблемой пару месяцев назад, работая над веб-приложением. После небольшого исследования подход «Shadow DOM», предложенный в следующей статье, помог.

https://medium.com/@dvoytenko/amp-ios-scrolling-redo-2-the-shadow-wrapper-approach-experimental-3362ed3c2fa2.

 var sd = document.body.attachShadow({mode: 'open'});

 // Main slot will absorb all undistributed children.
 var mainSlot = document.createElement('slot');
 var scroller = document.createElement('div');
 scroller.style = 'background: lightblue; position: absolute; top: 
  0; left: 0; right: 0; bottom: 0; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch;';
  scroller.appendChild(mainSlot);
  sd.appendChild(scroller);

// Selectively, it's also possible to distribute fixed elements separately,
// emulating fixed layer transfer.
 var fixedLayer = document.createElement('div');
 fixedLayer.style = 'height: 0; width: 0; position: fixed; 
  overflow:visible;';
 sd.appendChild(fixedLayer);

 var mainFixedSlot = document.createElement('slot');
 mainFixedSlot.setAttribute('name', 'fixed');
 fixedLayer.appendChild(mainFixedSlot);

function addToFixedLayer(element) {
 //var slotId = String(Math.random());
 //var fixedSlot = document.createElement('slot');
 //fixedSlot.setAttribute('name', slotId);
 //fixedLayer.appendChild(fixedSlot);
 //element.setAttribute('slot', slotId);
 element.setAttribute('slot', 'fixed');
} 

 /*Call and pass fixed elemetns to addToFixedLayer method so that they stay 
 fixed while scrolling */

 addToFixedLayer(fixedDivId)

Проверьте это демо https://jsfiddle.net/rsva63ep/

Answer 5

Если у вас есть фиксированный элемент в iframe, он остается фиксированным при просмотре содержимого.Однако возможно, что медиа-запрос изменяет свойство CSS, так что элемент больше не фиксируется в мобильной версии.

Вы можете попробовать это с помощью панели навигации boostrap.В версии для ПК навигационная панель исправлена, а в мобильной версии - больше не исправлена.

Версия для ПК:

Мобильная версия:

Можете ли вы показать нам код веб-страницы, отображаемой в iframe?