Modal Dialog: .slds-modal-backdrop--open Transitions in Lightning Experience

[matt-ian-thomas]

This could just be misuse, so I apologize if that is the case. However, I'm working with modal dialogs on a page, and my <button id="account-dialog_cancel" type="button" class="slds-button slds-button--neutral">Cancel</button has a click listener on it which just invokes $("#account-dialog").hide("fade");

Here's the full markup of my dialog:

        <div id="account-dialog" style="display:none;">
            <div aria-hidden="false" role="dialog" class="slds-modal slds-fade-in-open">
                <div class="slds-modal__container">
                    <div class="slds-modal__header">
                        <h2 id="account-dialog-header" class="slds-text-heading--medium">New Account</h2>
                    </div>
                    <div class="slds-modal__content">
                        <div class="slds-card">
                            <div class="slds-card__header slds-grid">
                                <div class="slds-media slds-media--center slds-has-flexi-truncate">
                                    <div class="slds-media__figure">
                                        <img src="{!URLFOR($Resource.lightning_design, 'assets/icons/standard/account_120.png')}" class="slds-icon slds-icon-standard-account slds-icon--small"/>
                                    </div>
                                    <div class="slds-media__body">
                                        <h2 class="slds-text-heading--small slds-truncate">General Information</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="slds-col--padded" style="padding:1rem;">
                            <div class="slds-form-element is-required">
                                <label for="account-name" class="slds-form-element__label">Account Name</label>
                                <input id="account-name" fieldname="Name" class="slds-input" required="true"></input>
                            </div>
                            <div class="slds-form-element">
                                <label for="account-phone" class="slds-form-element__label">Phone</label>
                                <input id="account-phone" fieldname="Phone" class="slds-input slds-form-element__control phone-number"></input>
                            </div>
                        </div>
                        <div class="slds-card">
                            <div class="slds-card__header slds-grid">
                                <div class="slds-media slds-media--center slds-has-flexi-truncate">
                                    <div class="slds-media__figure">
                                        <img src="{!URLFOR($Resource.lightning_design, 'assets/icons/action/description_120.png')}" class="slds-icon slds-icon-action-description slds-icon--small"/>
                                    </div>
                                    <div class="slds-media__body">
                                        <h2 class="slds-text-heading--small slds-truncate">Billing Address</h2>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="slds-col--padded" style="padding:1rem;">
                            <div class="slds-form-element is-required">
                                <label for="account-billing-street" class="slds-form-element__label">Street Address</label>
                                <input id="account-billing-street" fieldname="BillingStreet" class="slds-input slds-form-element__control" required="true"></input>
                            </div>
                            <div class="slds-form-element is-required">
                                <label for="account-billing-city" class="slds-form-element__label">City</label>
                                <input id="account-billing-city" fieldname="BillingCity" class="slds-input slds-form-element__control" required="true"></input>
                            </div>
                            <div class="slds-form-element is-required">
                                <label for="account-billing-state" class="slds-form-element__label">State</label>
                                <input id="account-billing-state" fieldname="BillingState" class="slds-input slds-form-element__control" required="true"></input>
                            </div>
                            <div class="slds-form-element is-required">
                                <label for="account-billing-postal-code" class="slds-form-element__label">Zip Code</label>
                                <input id="account-billing-postal-code" fieldname="BillingPostalCode" class="slds-input slds-form-element__control" required="true"></input>
                            </div>
                        </div>
                    </div>
                    <div class="slds-modal__footer">
                        <button id="account-dialog-cancel" type="button" class="slds-button slds-button--neutral">Cancel</button>
                        <button id="account-dialog-save" type="button" class="slds-button slds-button--brand">Save</button>
                    </div>
                </div>
            </div>
            <div class="slds-modal-backdrop slds-modal-backdrop--open"></div>
        </div>

In the Lightning Experience UI, the fade animation only affects part of the grey backdrop; the rest of the page's backdrop snaps back to white. This behaviour isn't present in Salesforce Classic. Here is a gif detailing this:

[kaelig]

Hi @matt-ian-thomas, thank you for using the Salesforce Lightning Design System and for reporting this.

I'm afraid we don't provide support for using the Design System on the Lightning Experience UI at the moment. Can you please look for help within the developer community and let us know if you find a solution?