不正确地渲染

Question

我正在开发PWA，并尝试在其上使用Plotly（JS），但是Plotly绘图的某些部分在下面呈现以绘制数据（例如标签，屏幕截图，裁剪等按钮以及应该在悬停时显示的内容）。

我不会通过CSS或任何未记录的内容来更改任何Plotly的样式

HTML：

ngOnInit() {
  this.getHello()
    .pipe(map(_ => this.getBye()))
    .subscribe(data => console.log(data));
}

getHello(): Observable<string> {
  return of('Hello');
}

getBye(): string {
  return 'Bye';
}

CSS：

<div class="plot-dialog hidden">
    <div class="plot-header">
        <span class="plot-station-name"></span>
        <select id="plot-var">
            <option value="voltage">Voltage</option>
            <option value="temp">Temperature</option>
            <option value="humi">Humidity</option>
            <option value="wind">Wind Speed</option>
        </select>
        <img src="images/back_arrow.svg" class="icon-return">
    </div>
    <div class="plot"></div>
</div>

Javascript：

.plot-dialog {
    background: #ececec;
    border-radius: 2px;
    z-index: 1;

    width: 100%;
    height: 100%;
}

.plot-header {
    margin: 0;
    width: 100%;
    line-height: 2em;
    display: inline-block;
    position: fixed;
    z-index: 2;
    padding: 4px;

    box-sizing: border-box;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}

.icon-return, .line-graph, .details-close-icon {
    width: 2em;
    float: right;
    margin-left: 1em;
}

.plot {
    max-width: 100%;
    padding-top: 3.5em;
}