[wp-trac] [WordPress Trac] #35824: Inline svg icons are not displaying when the page is viewed from Customizer's iframe

[WordPress Trac]

#35824: Inline svg icons are not displaying when the page is viewed from
Customizer's iframe
--------------------------+--------------------
 Reporter:  johndoedoe    |       Owner:
     Type:  defect (bug)  |      Status:  new
 Priority:  normal        |   Milestone:  4.6
Component:  Customize     |     Version:  4.4.2
 Severity:  normal        |  Resolution:
 Keywords:                |     Focuses:
--------------------------+--------------------

Comment (by bentleykfrog):

 I am able to reproduce this in Chrome 49.0.2623.112.

 From investigation it appears to be a combination of a base href tag in
 the iframe's document and the fact that the iframe is injected without a
 history state. If there is a history state that matches the base href's
 value or the base href is removed, inline svgs work. See the svg-inline-
 and-injected-iframe.zip file I attached for a testable example of this.
 Remove the <base> tag or uncomment the .replaceState line in the js.

 You could change the api.PreviewFrame's iframe injection from this

 {{{
         self.targetWindow( self.iframe[0].contentWindow );

         self.targetWindow().document.open();
         self.targetWindow().document.write( response );
         self.targetWindow().document.close();
 }}}

 to this

 {{{
         self.targetWindow( self.iframe[0].contentWindow );

         self.targetWindow().document.open();
         //origin matches the base href value in the iframe
         self.targetWindow().history.pushState( {}, '', self.origin() );
         self.targetWindow().document.write( response );
         self.targetWindow().document.close();
 }}}

 to fix the issue without removing the <base> tag.

 @aut0poietic i'm concerned that your issue might be caused by this
 https://github.com/w0rm/gulp-svgstore/issues/31
 is your svg sprite hidden by display:none? try:

 {{{
 width: 0; height: 0; visibility: hidden; position: absolute;
 }}}

--
Ticket URL: <https://core.trac.wordpress.org/ticket/35824#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform