Power BI Embedded在Chrome中Table视觉对象滚动条不可见问题咨询

问题现象 #

嵌入的Power BI报表中，Table视觉对象的滚动条在Google Chrome浏览器中无法显示，但在Firefox浏览器中可正常显示。Power BI工作区报表与嵌入报表的显示差异如下：

• Power BI工作区中的报表：
• Power BI Embedded中的报表：

通过添加以下配置可解决该问题，但不清楚背后原因：

settings: {
    layoutType: models.LayoutType.Custom,
    customLayout: {
        pagesLayout: {
              '': { visualsLayout: { '': { } } }
        }
    }
 }

需明确该问题的成因以及此修复方案有效的原理。

系统信息 #

• Angular版本：11
• powerbi-client-angular版本：2.0.0
• Google Chrome版本：111.0.5563.111（官方版本）（64位）

补充配置与自定义CSS #

完整报表配置 #

settings = {
    type: 'report',
    tokenType: models.TokenType.Embed,
    embedUrl: embedParameters.embedItem.embedUrl,
    accessToken: embedParameters.embedToken.token,
    settings: {
        layoutType: models.LayoutType.Custom,
        panes: {
            pageNavigation: {
                visible: false
            },
            filters: {
                visible: false
            }
        },
        customLayout: {
            pagesLayout: {
                '': {
                    visualsLayout: {
                        '': { }
                    }
                }
            }
        }
    }
} as IReportEmbedConfiguration;

组件代码 #

<powerbi-report         
    [embedConfig]="getReportConfiguration()"
    [eventHandlers]="reportEventHandlers"
    cssClassName="report-container">
</powerbi-report>

自定义CSS #

::ng-deep .report-container {
    padding-top: 1rem;
    padding-left: 2rem;
    padding-right: 2rem;
    height: 820px;
    width: 1280px;
}

问题成因分析 #

该问题属于Chrome浏览器与Power BI嵌入组件的布局渲染兼容性问题，核心原因有两点：

1. 默认布局的渲染逻辑差异：使用Power BI嵌入的默认布局（未指定或LayoutType.FitToPage）时，Chrome的盒模型计算、滚动容器溢出规则与Firefox存在差异。Power BI工作区的渲染环境与嵌入环境的容器样式隔离机制不同，工作区中Chrome能正确识别Table视觉对象的溢出区域并渲染滚动条，但嵌入环境下，Angular的组件封装结合::ng-deep的样式穿透，干扰了Power BI内部滚动容器的尺寸计算，导致滚动条被隐藏。
2. 样式优先级冲突：Angular的视图封装机制会为组件样式添加隔离前缀，::ng-deep的穿透样式可能覆盖了Power BI嵌入组件内部的滚动容器样式。Chrome对iframe（Power BI嵌入本质是iframe）动态内容的样式优先级处理更严格，导致Table的overflow-y: auto规则未被正确应用。

修复方案生效原因 #

添加的自定义布局配置强制Power BI嵌入组件切换到自定义布局模式，触发了关键变化：

1. 重新初始化布局计算：设置layoutType: Custom后，Power BI嵌入引擎会忽略默认自适应布局逻辑，改为基于customLayout的显式布局计算。即使仅用空对象的通配符（''匹配所有页面和视觉对象），也会强制引擎重新计算每个视觉对象的容器尺寸与溢出规则，纠正了Chrome下的尺寸计算错误。
2. 绕过默认布局的渲染Bug：自定义布局模式下，Power BI会为每个视觉对象生成独立的布局上下文，避免了默认布局中Chrome特有的容器尺寸计算问题，滚动容器的overflow属性被正确标记，Chrome能识别内容溢出并渲染滚动条。
3. 重置样式优先级：切换到自定义布局后，Power BI嵌入组件的内部样式生成逻辑会重置，Angular样式穿透的干扰被削弱，滚动条的默认样式规则得以正常生效。

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