Forum Discussion
Iframe continues scrolling after mouse release when interacting with Power BI visuals
Hi Community,
I'm experiencing an issue with a Power BI report embedded inside an iframe.
Scenario
- Power BI report is hosted within a custom web application using an iframe.
- Users interact with report visuals that support scrolling (tables, matrices, slicers, etc.).
- When clicking and dragging the scrollbar inside a visual, the scrolling continues even after the mouse button has been released.
- It appears as though the iframe or embedded report is still capturing the drag/scroll event.
Expected Behavior
Once the mouse click is released, scrolling should stop immediately and control should return to the page normally.
Actual Behavior
Scrolling persists for a short period or remains "stuck" until the user clicks elsewhere in the report or page.
Environment
- Power BI Embedded / Power BI Service in iframe
- Browser: [Chrome/Edge version]
- Report contains tables and matrix visuals with internal scrollbars
- Custom web application hosting the iframe
7 Replies
Hi,
This is a known side effect of the drag interaction crossing the iframe boundary. When you grab a scrollbar inside the report and the cursor leaves the iframe during the drag, the mouseup fires on the parent page instead of inside the iframe, so the visual never receives its "release" event and keeps thinking you're still dragging. That's why it stays stuck until you click again inside the report, which finally hands it the event it was waiting for.
The real fix is usually the embedding method rather than the report. If you're pointing a raw <iframe src="app.powerbi.com/..."> at the Service, that path isn't really supported for interactive embedding and these pointer-event quirks are exactly what it produces. Switching to the official powerbi-client JavaScript SDK (powerbi.embed()) is what solves it in practice, because the SDK manages the pointer and message handling between host page and report properly instead of leaving the browser to guess.
If you're already on the SDK and still seeing it, then handle the released event on the host side: capture mouseup at the parent document level and forward it so the embedded report knows the drag ended.
For what it's worth, if you'd rather not build and maintain the embedding layer yourself, we run an out-of-the-box embedding solution at DataTako.com that handles this pointer/event plumbing (and the viewer licensing side) for you, so it's an option if this turns into more work than it's worth. Either way, happy to help you get it sorted, just let me know how you're currently embedding and I can point you at the specific fix.
If this gets it working, please mark it as the solution so others with the same iframe behaviour find it faster.
Paco
Helping data analytics leaders distribute their reportsI have used this approach, but it dint worked. I am using angular 20 with "powerbi-client": "2.20"
my Html looks like this :
<div id="reportContainer">
</div>
and typescript like this:
private report: pbi.Report;this.report = <Report>(this.powerbi.embed(reportContainer, config));
it create a source like
<div id="reportContainer">
<iframe src="app.powerbi.com/...">
</div>Hi Mohd_Naim,
Thank you for posting your query in the Microsoft Fabric Community Forum, and thanks to sukhi-cloudy & DataTako for sharing valuable insights.
Could you please confirm if your query has been resolved by the provided solutions? This would be helpful for other members who may encounter similar issues.
Thank you for being part of the Microsoft Fabric Community.
It couldn't resolve the issue, we are still investing it
Hi Mohd_Naim,
Thank you for the update. We understand that the issue is still under investigation. and thanks to sukhi-cloudy & DataTako for sharing valuable insights.
Since you are already using the powerbi-client SDK, could you please share the following details when available?
• The browser and version where the issue occurs (Chrome/Edge).
• Whether the issue occurs consistently or only under specific conditions, such as when dragging the scrollbar outside the iframe boundary.
• Whether the behavior occurs with all scrollable visuals or only specific visuals, such as tables or matrices.
• Whether any errors are reported in the browser console when the issue occurs. Microsoft provides guidance on using the embedded report's error event and browser console to troubleshoot embedded analytics issues.
For reference, you can also review the following Microsoft Learn documentation:
How to troubleshoot and debug your embedding code in Power BI embedded analytics | Microsoft Learn
How to handle events in a Power BI embedded analytics application | Microsoft Learn
These details may help narrow down the issue. Please keep us posted on your findings.
Thank you.
Hi Mohd_Naim,
I wanted to check if you had the opportunity to review the information provided. Please feel free to contact us if you have any further questions.
Thank you.
