Rhawbert Costa rhawbert
rhawbert
/ bad-safari.html
Last active
February 6, 2018 06:19
Safari 8 (iOS & Mac OS) doesn't render injected SVG sprites when defined later, after the actual svg > use tags
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <h1>Safari 8 is a no go (iOS & Mac OS)</h1> | |
| <p>Desktop version 8.0 (10600.1.25), Mobile v. 8.0.2</p> | |
| <h2>Before the svg sprite as symbol</h2> | |
| <svg class="icon"> | |
| <use xlink:href="#icon-airplane" /> | |
| </svg> | |
| <svg xmlns="http://www.w3.org/2000/svg" style="display:none; position:absolute; width:0; height:0;"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| * { | |
| margin:0; | |
| padding:0; | |
| } | |
| div { | |
| width:170px; | |
| overflow:visible; | |
| margin:100px; |