События Resize и OrientationChange не запускаются в Safari iOS 13 - PullRequest
Новая
       106

События Resize и OrientationChange не запускаются в Safari iOS 13

0 голосов
/ 04 мая 2020

Я пытаюсь настроить элемент Canvas, который заполняет окно (в частности, контейнер div, который заполняет тело). Все отлично работает на рабочем столе, но по какой-то причине в Safari на iOS (протестировано на 13.4.1) ни события window.resize, ни window.orientationchange не запускаются вообще. 

$(function(){
    resizeCanvas();
});

$(window).on('resize', function(){
    resizeCanvas();
});

$(window).on('orientationchange', function() {
    resizeCanvas();
});

function resizeCanvas()
{

    var canvas = $('#my_canvas');

    canvas.css("width", "100%");
    canvas.css("height", "100%");
}

HTML код: 

<body>
    <div id="canvas_container">
        <canvas id="my_canvas"></canvas>
    </div>
</body>

И стиль: 

#canvas_container
{
    padding: 50px 50px 50px 50px;
    height: 100%;
    width: 100%;
}

#my_canvas
{
    border: 3px solid black;
    width: 100%;
    min-height: 400px;
    height: 100%;
}

body, html 
{
    height: 100%;
}

Я что-то упускаю из-за Safari c в том, как я работаю с событием изменения размера?

1 Ответ

0 голосов
/ 05 мая 2020

Мне удалось решить проблему, фактически она не имела ничего общего с моим кодом, что затрудняло его отладку. Я объясню свою методологию и решение на случай, если кто-нибудь еще столкнется с этой проблемой.

Поскольку я добавлял все больше и больше кода отладки, чтобы попытаться выяснить, что происходит не так, я начал подозревать, что браузер не запускает мой Javascript (который находится в отдельном файле .js на сервере). В конце концов я вытащил необработанные журналы доступа для сервера и обнаружил, что, хотя для главной страницы была запись журнала 200 OK, для файла Javascript не было записи.

Такое поведение было немного неожиданным, поскольку стандартным поведением будет запрос HTTP GET с заголовком If-Modified-Since, который позволит браузеру пропускать загрузку содержимого, если сервер обнаружит, что страница не была изменена. Затем это будет записано как результат 304 NOT MODIFIED в журнале доступа сервера.

Сравнение журнала доступа для сеанса iPhone с журналом обычного сеанса Firefox на рабочем столе показало, что Firefox браузер запрашивал все ресурсы страницы и получал 304 результаты и 200 соответственно, которые были записаны в журнале доступа, в то время как сеанс iPhone имел только запрос к главной странице.

На данный момент казалось, что у Safari был какой-то странный механизм кеширования, который даже не удосужился запросить ресурсы. Однако это не казалось правдоподобным, поэтому я продолжал исследовать, пока не заметил, что iPhone запрашивает главную страницу по HTTP, а не по HTTPS (как версия для настольного компьютера). Я просто не набрал https:// в Safari.

Переключение Safari на HTTPS привело к тому, что Javascript корректно потянуло и запустилось. Возможно, это является следствием некоторой политики безопасности в Safari.

...