Microsoft Teams网页版任务模块Spinner定位异常求助

• 问题发生在Microsoft Teams网页版，2-3周前开始出现，此前运行完全正常
• 已按官方文档规范配置：应用清单中showLoadingIndicator属性设为true，应用调用app.initialize()后，会根据业务场景执行app.notifySuccess()或app.notifyFailure(...)
• 通过task/fetch请求返回TaskInfo对象创建任务模块，核心代码如下：

task: {
  type,
  value: {
   title,
   height, // default 'medium'
   width, // default 'medium'
   url
  },
},

预期iframe加载完成前，原生Spinner会在任务模块中居中显示，但实际因Spinner容器的CSS规则冲突，导致Spinner偏移至任务模块底部。

Spinner容器的HTML结构：

<div class="embedded-page-busy-container" ng-if="ctrl.showLoadingIndicator">
    <busy-animation class="loading-spinner" size="medium"><div class="ts-spinner-internal size-2x">
        <div class="ts-spinner-container">
            <svg class="spinner-animate" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 4880">
              ...
            </svg>
        </div>
    </busy-animation>
</div>

最外层.embedded-page-busy-container的CSS规则：

position: absolute;
height: 100%;
width: 100%;
top: 50%;
margin: -1.6rem 0 0 -1.6rem;

内层busy-animation容器的CSS规则：

position: absolute;
top: calc(50% - 2rem);
left: calc(50% - 2rem);
z-index: 1;

两层容器的定位规则叠加后，父容器先垂直偏移50%，Spinner再相对父容器居中，最终导致Spinner卡在任务模块底部。

请问有没有人遇到过相同问题？或者有没有方法为任务模块添加自定义CSS来修复这个定位异常？

问题截图：Spinner未在任务模块居中，而是偏移至底部区域

内容的提问来源于stack exchange，提问作者Nazlobudnya