Created attachment 453854 [details] Example of wrong behavior <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> </head> <body> <iframe width="600" height="300" src=""></iframe> <script type="text/javascript"> $(function() { var f = $('iframe')[0]; wnd = f.contentWindow, doc = f.contentDocument; if(wnd.stop) { wnd.stop(); } $(doc.head).append('<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">'); $(doc.body).html('{<i class="fa fa-angle-left"></i><i class="fa fa-angle-right"></i>}'); }); </script> </body> </html> instead symbols Safari shows squares. Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.3 Safari/605.1.15
<rdar://problem/89841517>