Invalid app.height in PWA

1

Здравствуйте.

Периодически (1 раз из 50) при открытии с главного экрана установленной PWA версии, app.height оказывается меньше на высоту safe-area (скорее всего safe-area-inset-top, не записал значения, когда словлю в след.раз, запишу…), если в альбомную ориентацию и обратно, то высота становится нормальной.
Проблема точно возникает в iOS 12, в Android вроде как тоже было, но надо перепроверять, в основном тестируем iOS.

Подскажите, пожалуйста, как принудительно обновить app.height?..
Спасибо.

2

Можно принудительно задать в CSS:

#app {
  height: 100vh;
}
3

Т.к. при height:100vh; в Safari все съезжает вниз за бар, то свойства высоты добавляются в onload, сейчас используются такой вариант:

const standalone_css={'height':'100vh'};
if(app.device.standalone) {
    $$('html').css(standalone_css); 
    $$('body').css(standalone_css); 
    $$('.framework7-root').css(standalone_css);
}

Попробую заменить на предложенный вариант…
$$('#app').css(standalone_css);

4

Заменил на $$('#app').css({height:"100vh"}), судя по всему это аналогично тому, что у меня было в посте выше, и проблему это не решило…
Только что снова при запуске словил app.height меньше на 50px (это safe-area-inset-top).

Можно ли как-то еще принудительно обновить app.height из js?

5

Если ровно 50px то это не safe-area. Похоже на баг iOS. Если убрать/добавить viewport-fit = cover?

6

safe-area-inset-top = 50px
Судя по всему F7 неверно определяет высоту, т.к. сейчас проверил document.body.scrollHeight показывает верную высоту, а app.height на 50px меньше…

Каким образом F7 получает app.height?

7

причем тут что определяет f7? стилей же никаких не стоит, это определяется как window.innerHeight, что видимо неверно передает iOS

8

Если height: 100% не работает на html, попробуй указать height: calc(100vh + 50px) но это прям явный костыль будет)

9

Ну F7 же сохраняет в какой-то момент откуда-то высоту?..

Я думаю, что как раз при запуске iOS отдает неверную высоту и F7 ее сохраняет, а потом высота корректируется, потому что document.body.scrollHeight отображает верную.

Дополнено:
Не прочитал, сейчас проверю значение window.innerHeight

10

Да, window.innerHeight тоже отдает верную высоту, получается в момент, когда F7 ее сохраняет, у iOS она оказывается неверной.

Дополнено:
Закинул в onload alert(app.height+’/’+window.innerHeight) и оба значения показывают неверную высоту (экран при этом белый).
Судя по всему уже потом высота выравнивается.

Можно ли потом принудительно прописать app.height=window.innerHeight?

11

Можно но это никак не повлияет ни на что