<use> tag in an <apex:repeat /> preventing reRender of apex:repeat

Question

I'm creating a VF page using the Salesforce Lightning Design System, as part of this, I want to use SLDS Notifications to display page messages and other notifications.

<apex:outputPanel layout="block" id="repeatPanel" >
    <apex:repeat value="{!customPageMessages}" var="m" id="repeat">
        <div class="slds-notify_container slds-m-vertical--x-small">
          <div class="slds-notify slds-notify--alert slds-theme--alert-texture slds-theme--{!m.severity}" role="alert">
            <button class="slds-button slds-notify__close slds-button--icon-inverse" title="Close" onClick="dismiss(this)">
              <svg class="slds-button__icon" aria-hidden="true">
                <use xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>
              </svg>
              <span class="slds-assistive-text">Close</span>
            </button>
            <span class="slds-assistive-text">{!m.severity}</span>
            <h2>{!m.message}</h2>
          </div>
        </div>
    </apex:repeat>
</apex:outputPanel>

I have run into an issue with not being able to reRender my <apex:repeat> tag. Looking at the logs it does appear that VF is evaluating my merge fields and formulas. After some investigating I've narrowed it down to this line.

<use xlink:href="{!URLFOR($Resource.SLDS, '/assets/icons/utility-sprite/svg/symbols.svg#close')}"></use>

If I remove the <use> tag everything renders the way I'd expect it. However with the <use> tag in the markup, nothing gets rendered.

This happens in Chrome, Firefox, and IE.

Answer 1

Credit to Rohit Mourya

I think this is known limitation of the browser .Since the SVG use xlink you can't reRender SVG component.