与浏览器相比，WebView 呈现的 CSS 不同

Question

我正在尝试 Capacitor 和 Angular。我没有使用 Ionic。

在 Android 模拟器中运行我的应用时，样式已关闭。正如您在下面看到的，渐变背景位于“增量”按钮的顶部，而在浏览器中一切看起来都很好。

我是否需要提供一些额外的 CSS 才能使样式与 Capacitor 正确应用？

这是渲染组件的 HTML 和 CSS。

<div class="incrementor">
    <h1>Count: {{ count }}</h1>
    <button mat-raised-button color="primary" (click)="increment()">Increment</button>
</div>
<div class="gradient">
    <!-- Gradient -->
</div>

:host {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

.incrementor {
    margin-top: 16px;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.gradient {
    min-height: 1024px;
    background: linear-gradient(135deg, #a0fe65 10%, #fa016d 100%);
}

WebView 无法像 Chrome 一样呈现样式的原因是什么？

Answer 1

问题已通过将 Android 升级到版本 10 (API 29) 得到解决。该问题出现在 Android 9.0 Pie (API 28) 上。