Дочерний компонент не отображается на iOS

Question

Я пытаюсь создать базовое веб-приложение для настольных компьютеров и мобильных устройств, но я столкнулся с проблемой, когда использование корневого селектора моего дочернего компонента в моем основном компоненте не отображает дочерний компонент и делает элементы под ним исчезают.

Даже если HTML-код в дочернем компоненте пуст, использование селектора дочернего компонента по-прежнему вызывает проблему, но если я полностью уберу селектор, все остальное выглядит хорошо.

Вот мой код:

.menu {
  float: left;
  width: 20%;
  text-align: center;
}

.main {
  float: left;
  width: 60%;
  text-align: center;
  padding: 0 20px;
}

.right {
  float: left;
  width: 20%;
  padding: 15px;
  margin-top: 7px;
  text-align: center;
}

@media only screen and (max-width:620px) {
  .menu,
  .main,
  .right {
    width: 100%;
  }
}

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<div style="overflow:auto">
  <div class="menu">
    <h2>Text</h2>
    <p>Text</p>
  </div>

  <div class="main">
    <button>Test</button>
    <child-component></child-component>
  </div>

  <div class="right">
    <h2>Text</h2>
    <p>Text</p>
  </div>
</div>

Вот дочерний компонент (без CSS):

<p>Click the button</p>
<button [hidden]="started" (click)="start()">Start</button>
<button [hidden]="!started" (click)="stop()">Stop</button>
<button [hidden]="!canreset" (click)="reset()">Reset</button>
<p>Your message: {{display}}</p>

Я посмотрел другие посты и попытался установить ViewEncapsulation.None на дочернем компоненте, но, похоже, это не сработало.