3

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?

3
  • This does not happen in my case!
    – Ashwani
    Dec 29, 2016 at 18:35
  • @Ashwani Do you mean it doesn't disappear?
    – Lance Shi
    Dec 29, 2016 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, 2017 at 16:21

0

You must log in to answer this question.

Browse other questions tagged .