Powerbi embedded iframe IOS scrolling issues

[msaidem]

Hello,

I’m currently working on a project where I embed Power BI dashboards into a web application using powerbi-client-react: 2.0.2. The implementation works as expected on laptops and Android devices, but I’m encountering a scrolling issue on iOS devices.

Layout structure

My page is structured like this:

• Top component
• Dashboard container
  • Embedded Power BI dashboard (inside an iframe)
• Bottom component

Issue on iOS

On iPhones (across different browsers), scrolling behaves differently than expected:

• I can scroll normally through the page until I reach the iframe.
• Once I start scrolling inside the iframe, it captures the scroll interaction.
• When the iframe reaches its scroll limit, the scroll is not passed back to the main page.
• As a result, further scrolling appears “stuck” unless I move my touch outside the iframe area.

Expected behavior

On Android devices, the scrolling works as intended:

• The iframe captures scroll while active.
• Once the iframe content ends, scrolling naturally continues on the main page.

Question

Is this a known limitation or behavior specific to iOS (Safari/WebKit)? Are there any recommended workarounds or best practices to ensure smooth scroll handoff between an iframe and the parent page on iOS?

[Juan-Power-bi]

Yes, Safari doesn't propagate scroll events from an iframe back to the parent page once the iframe hits its scroll boundary, unlike Chrome on Android which handles it more gracefully.
The most reliable workaround is to listen for touch events on the iframe's container in your parent page and manually handle the scroll handoff. Something like this:
javascriptconst container = document.querySelector('.dashboard-container');

container.addEventListener('touchstart', (e) => {
this.touchStartY = e.touches[0].clientY;
}, { passive: true });

container.addEventListener('touchmove', (e) => {
const deltaY = this.touchStartY - e.touches[0].clientY;
window.scrollBy(0, deltaY);
this.touchStartY =