We are using slds-modal in our LWC, which is working fine in desktops and large devices. Means behind the modal we are showing the slds-backdrop screen and it covers everything behind the modal box to restrict the unwanted component interactions.

But for Salesforce mobile app for some reason the height of slds-backdrop is set to the bottom navigation bar only. If the user tries to scroll the backdrop then he is able to scroll and interact with other components behind the backdrop as shown below:

Before Scrolling:

After Scrolling:

I want to cover everything behind the modal box with backdrop screen. The slds-backdrop black screen is scrollable, if you try to scroll the backdrop black screen it will going to scroll and reveal the other components behind it. I did a quick research and found that it's a known issue but didn't get any solution.

Please help me on this.

Thanks in advance!

  • 1
    is this OOTB, or the backdrop you implemented for a custom component?
    – glls
    Commented May 23, 2021 at 12:53
  • 1
    Hi @glls, Yes its OOTB. I have used slds-backdrop class in a div as shown below: <section role="dialog" tabindex="-1" class="slds-modal slds-fade-in-open slds-modal_small"> <!--Extra code --> </section> <div class="slds-backdrop slds-backdrop_open"></div> Commented May 24, 2021 at 7:27
  • @RohitBhamdare, Did you find any solution for this issue? If so, please suggest. Commented May 17, 2022 at 14:18
  • @RohitBhamdare did you get a workaround for this? Commented Aug 3, 2022 at 14:42
  • Hi, wondering if you found a fix for this? Commented Aug 9, 2022 at 0:30


You must log in to answer this question.

Browse other questions tagged .