P.S Проблема решилась отключением свойства css transform:translate(-50%, -50%). Не понятно с чем это связано.
Суть проблемы:
В iframe загружается документ, в котором при работе пользователя изменяется document height.
С помощью MutationObserver отслеживаю изменение документа, и если изменилась его высота, то изменяю размер iframe.
В Firefox всё отлично, а в Chrome некоторые iframe визуально искажаются (размываются), но не все (в одном документе их может быть несколько).
1)
Слева Chrome - Справа Firefox
2)
Сверху 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});
});