Skip to content
This repository has been archived by the owner on Jan 9, 2023. It is now read-only.

Revert "CB-13987: (ios) Fix WKWebView doesn't layout properly at launch on iPhoneX" #107

Merged
merged 1 commit into from
Jul 17, 2019

Conversation

dpogue
Copy link
Member

@dpogue dpogue commented Jul 17, 2019

Reverts #45

This removes developer control over the handling of safe areas using the viewport-fit meta tag.

The correct way to fix unexpected gaps and layout issues lies at the HTML and CSS level:

  • Set viewport-fit=cover directive in the viewport meta tag to make the webview contents extend into the safe area insets:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
  • If necessary, use 100vh rather than 100% to make your app container fill the screen:

    body {
      min-height: 100vh;
    }
  • Use CSS env(safe-area-inset-*) variables to add padding to avoid overlapping status bar text:

    header {
      height: 44px;
      padding-top: env(safe-area-inset-top);
    }

closes #105

@janpio janpio merged commit dc8b277 into master Jul 17, 2019
@janpio janpio deleted the revert-45-CB-13987 branch July 17, 2019 21:09
@xtassin
Copy link

xtassin commented Jul 25, 2019

Issue #53 is now a problem again.

This issue can not be solved with CSS, HTML or viewport configuration.

If you read carefully #53 description, it is stated that the incorrect height is updated when device is rotated which seems to point at a bug in the plugin or webview.

I would like to add that the document body's height appears to be correct but content (first body's child) is not sized properly at start up until device rotation.

Thank you for considering issue #53 again and trying to reach a solution for all.

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Layout issue since moving from 1.1.4 to 1.2.0
3 participants