页面加载动画在加载时闪烁（缩放变化）答案

【问题标题】：Page load animation is flickering (zoom changing) while loading页面加载动画在加载时闪烁（缩放变化）
【发布时间】：2019-05-12 07:09:55
【问题描述】：

我们的 Angular (v7) 应用程序有一个启动动画，基本上显示了一个嵌入到 index.html 中的旋转轮（CSS 动画），因此它会在页面加载时立即显示。

这很好用，但是每加载约 4 个页面，缩放级别就会轻微闪烁（我在 Windows 10 上使用最新的 Chrome），这意味着包含“启动消息”的方形 div 以一种大小开始，然后下降大约 5% 的大小。它发生得非常快，从静态 HTML 内容呈现到视图的那一刻到呈现 Angular 视图之前大约一秒钟。并且看起来某些渲染引擎正在延迟加载并且出现问题（？）

难道 Angular 正在改变页面加载时的缩放/平移因子？

Index.html

<!doctype html>
<html lang="en" class="mitzi-page-root">
  <head>
    <meta charset="utf-8">
    <base href="/">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .mitzi-splash-view-indicator {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-animation: fadein 2s;
        animation: fadein 2s;
      }

      @keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
      }

      @-webkit-keyframes fadein {
        from { opacity: 0; }
        to   { opacity: 1; }
      }

      .mitzi-splash-indicator-dialog-bg {
        position: absolute;
        width: 15rem;
        height: 12rem;
        align-self: center;
        border-style: solid;
        border-width: .1rem;
        border-radius: 1rem;
        background: #FFFFFF;
        border-color: #378b68;
        -webkit-animation: fadein 5s;
        animation: fadein 5s;
      }

      .mitzi-splash-indicator-loader-wrapper {
        position: absolute;
        left: 4.6875rem;
        top: 2.2495rem;
        width: 5.625rem;
        height: 5.625rem;
        padding-bottom: 3rem;
      }

      .mitzi-splash-indicator-loader {
        width: 5.625rem;
        height: 5.625rem;
        align-self: center;
        animation: mitzi-splash-indicator-spin 1s steps(8) infinite;
      }

      .mitzi-splash-indicator-message {
        position: absolute;
        top: 9.125rem;
        width: 100%;
        text-align: center;
        height: 1rem;
        line-height: 1rem;
        font-family: 'Open Sans', serif;
        font-size: 1rem;
        font-weight: normal;
        color: #2A6E52;
      }

      @keyframes mitzi-splash-indicator-spin {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      .mitzi-splash-indicator-spinner {
        fill: #0c573c;
      }
    </style>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open Sans">
    <link rel="shortcut icon" sizes="32x32" href="assets/img/favicon-mitzi.png" type="image/png" />
  </head>
  <body class="mitzi-body">
    <mitzi-root>
    </mitzi-root>
    <div id="mitzi_app_preloader" class="mitzi-splash-view-indicator">
      <div class="mitzi-splash-indicator-dialog-bg">
        <div class="mitzi-splash-indicator-loader-wrapper">
          <div class="mitzi-splash-indicator-loader">
            <svg class="mitzi-splash-indicator-spinner" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background: none;">
              <!-- HERE COMES SOME **STATIC** SVG GRAPHICS THAT IS BEING ROTATED BY **CSS** (AND NOT BY SVG ANIMATIONS - WHICH *WOULD* MESS THINGS UP)... -->
            </svg>
          </div>
        </div>
        <span class="mitzi-splash-indicator-message">Loading ...</span>
      </div>
    </div>
    <div style="display: none !important" id="hidden-div-for-assets-load-on-startup">
      <img src="assets/img/common/error.svg">
      <img src="assets/img/status_icons/form_error.png">
      <span class="pi pi-times"></span>
    </div>
    <title>mitzi</title>
  </body>
</html>

【问题讨论】：

向我们展示一些代码，尽管我确信它与它无关
添加了我的 index.html

标签： css angular google-chrome

【解决方案1】：

box-sizing 是由我们自己的代码设置的 .... 它触发了 div 大小的微小变化

【讨论】：