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?
