You tought Webcomponents are encapsulated?

Well, you were wrong. It turns out Webcomponents leak. We’re using polymer engine, and here’s what our code looked like on the parent page:

<meta name=”viewport” content=”width=device-width, …, viewport-fit=cover”>

and in the webcomponent:

<meta name=”viewport” content=”width=device-width, …”>

It turns out, as soon as you load the webcomponent, its meta will override the parent page’s meta, as they share name, therefore breaking iOS notch functionality, and adding two ugly bars for the not safe space.

look, how ugly the two white bar on the edge of the screen is. the viewport-fit will sort that — unless you override it from webcomponents