2

This is the why part of this question: Lightning design system - SVG disappears after rerender

The below code should be able to get reproduced in every org.

VF page:

<apex:page controller="Test_Donot_Package_Controller">
    <html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
    <apex:stylesheet value="{!URLFOR($Resource.Slds213, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />
    <div class="Vision6">
        <apex:form id="testForm">
            <div class="slds-page-header">
                <div class="slds-grid">
                    <div class="slds-media slds-media--top slds-no-space slds-grow">
                        <div class="slds-media__figure">
                            <span class="slds-icon_container slds-icon-custom-custom27">
                                <svg aria-hidden="true" class="slds-icon">
                                    <use xlink:href="{!URLFOR($Resource.Slds213, 'assets/icons/custom-sprite/svg/symbols.svg#custom27')}"></use>
                                </svg>
                                <span class="slds-assistive-text">Account Icon</span>
                            </span>
                        </div>
                        <div class="slds-media__body">
                            <p class="slds-text-heading--label">Sample Page</p>
                            <div class="slds-grid">
                                <div class="slds-grid slds-type-focus slds-no-space">
                                    <h1 class="slds-text-heading--medium slds-truncate">Sample Title</h1>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="slds-col--padded slds-p-top--medium slds-p-left--medium">
                <apex:commandButton action="{!testButton}" styleClass="slds-button slds-button--brand" value="Click me" reRender="testForm"/>
            </div>
        </apex:form>
    </div>
    </html>
</apex:page>

Controller:

public class Test_Donot_Package_Controller {
    public Test_Donot_Package_Controller() {

    }

    public pageReference testButton()
    {
        return null;
    }
}

Please note that after clicking the button and rerendering, the svg icon disappears.

Mohith Shrivastava has explained this is a known bug of Salesforce. However, I am a bit curious about why this can possibly happen. In my understanding, plain html shouldn't be altered after the rerendering function. The only change is the variable values which doesn't apply here.

Any thoughts?

  • This does not happen in my case! – Ashwani Dec 29 '16 at 18:35
  • @Ashwani Do you mean it doesn't disappear? – Lance Shi Dec 29 '16 at 22:44
  • There is something happening for sure, you need to wrap the children in an element with the NS as outlined here: salesforce.stackexchange.com/questions/164801/… - If the parent does not have the NS specified it will break without console errors or warning.As to the why? sorry can't help but the easiest fix is outlined in my answer. Maybe that can shed some light as to the why – Eric Nov 24 '17 at 16:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.