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?

[v-echaithra]

Hi @msaidem ,

May I ask if you have resolved this issue? Please let us know if you have any further issues, we are happy to help.

Thank you.

[v-echaithra]

Hi @msaidem ,

Thank you @Juan-Power-bi  for your inputs.
We’d like to follow up regarding the recent concern. Kindly confirm whether the issue has been resolved, or if further assistance is still required. We are available to support you and are committed to helping you reach a resolution.

Thank you.

[Juan-Power-bi · Accepted solution]

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 =