Forum Discussion

msaidem's avatar
msaidem
New Member
3 months ago
Solved

Powerbi embedded iframe IOS scrolling issues

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 devi...
Need Help
  • Juan-Power-bi's avatar
    Juan-Power-bi
    3 months ago

    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 =

Juan-Power-bi's avatar
Juan-Power-bi
Super User
3 months ago

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 =