Проблема со scale фрейма в Chrome (размывает содержимое) при MutationObserver?

P.S Проблема решилась отключением свойства css transform:translate(-50%, -50%). Не понятно с чем это связано.

Суть проблемы:

В iframe загружается документ, в котором при работе пользователя изменяется document height.
С помощью MutationObserver отслеживаю изменение документа, и если изменилась его высота, то изменяю размер iframe.
В Firefox всё отлично, а в Chrome некоторые iframe визуально искажаются (размываются), но не все (в одном документе их может быть несколько).
1)5a17dfbd05232878810820.png
Слева Chrome - Справа Firefox

2)5a17e01ef3882207044733.png
Сверху Chrome - Снизу Firefox

Основная страница:

<iframe id="id_frame" width="100" height="100" src="......."></iframe>

<script type="text/javascript">
 function resizeFrame(new_width, new_height) {
  $("#id_frame").css({width: new_width + 'px', height: new_height + 'px'});
 }
</script>

------------------------------------------------------------------------------------------------------
JavaScript в фрейме:
var frame_height = 0,
    frame_width = 0;

$(document).ready(function() {
 frame_height = $(document).height();
 frame_width = $(document).width();
 window.top.resizeFrame(frame_width, frame_height);

 var observer = new MutationObserver(function(mutations) {
  if (frame_height != $(document).height()) {
   window.top.resizeFrame($(document).width(), $(document).height());
  }
 });
 observer.observe(document.getElementsByTagName('body')[0], {childList: true, attributes: false, characterData: false, subtree: true});
});
  • Вопрос задан
  • 104 просмотра
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы