php – Can’t figure out whats happening to my site on iOS 16

I was showing my site to a friend, but it looked like a garbage on his iPhone(chrome). I have reproduced the issue with iOS simulator. Since mobile doesn’t have developer tools, i cant figure out whats wrong. On iOS 17 all works fine. The breaking element is rendered inside an iframe from the same origin. It has javascript resize after load. I have done autoprefixing to all my css files. Please comment if you have any clue about what’s happening. The site is ezlet.fi if you want to take a look, but my apologies, it’s in Finnish. Thanks in advantage!

edited for more information and clarity:

here is a link to the code pen. I used my main site’s html with base tag to make it, and it accidentally reproduced the same issue as with ios 16. I
,t looks like the javascript can’t access to window.innerWidth. Here’s the console message: `

Uncaught DOMException: Permission denied to access property "innerWidth" on cross-origin object
    set_window_width https://ezlet.fi/login/login.js:8
    <anonymous> https://ezlet.fi/login/login.js:10
login.js:8
Uncaught DOMException: Permission denied to access property "innerWidth" on cross-origin object
    set_window_width https://ezlet.fi/login/login.js:8
    <anonymous> https://ezlet.fi/login/login.js:10
login.js:8
    set_window_width https://ezlet.fi/login/login.js:8
    <anonymous> https://ezlet.fi/login/login.js:10

`

Here’s is my iframes javascript (only the start, because I think that profiles function’s are irrelevant, but the whole code can be viewed here: whole login.js`

const meta_object = JSON.parse($("meta[name="meta_object"]").attr("content"));
function go_to_voc(id) {
    if (id.length == 20) {
    window.parent.location.assign("../sanastonharjoittelu/index.php?voc=" + id);
    }
}
function set_window_width() {
    document.documentElement.style.setProperty('--window-width', window.parent.innerWidth + "px");
}
set_window_width();
window.addEventListener('resize', set_window_width);
if ($("#login_signin_container").css("display") == "block") {
    window.parent.postMessage("resize|10|0|#login_signin_container", '*');
} else {
    if ($("#profile_logged").css("display") == "block") {
        window.parent.postMessage("resize|0|0|#profile_logged", '*');
    } else {
        window.parent.postMessage("resize|0|0|#profile_spectate", '*');
    }
}

`

Here’s the main window’s iframe resize handling code:

function resize(x,y, element) {
$("#login_iframe").off();
let iframe = document.getElementById("login_iframe");
if (iframe.contentWindow.document.readyState == "complete") {
    $("#login_iframe").css("width", Number($(this).contents().find(element).prop("scrollWidth")) - x +"px");
    $("#login_iframe").css("height", Number($(this).contents().find(element).prop("scrollHeight")) - y +"px");
    $("#login_iframe").contents().find("body").css("overflow-x", "hidden");
} else {
    $("#login_iframe").on("load", function() {
        $(this).css("width", Number($(this).contents().find(element).prop("scrollWidth")) - x +"px");
        $(this).css("height", Number($(this).contents().find(element).prop("scrollHeight")) - y +"px");
        $(this).contents().find("body").css("overflow-x", "hidden");
    });
}


addEventListener("message", function(event) {
parsed_data = event.data.split("|");
if (parsed_data[0] == "resize") {
    resize(parsed_data[1], parsed_data[2], parsed_data[3]);
}
});

All of my iframe javascript: all resizing code