作記録

記憶代わり

flex を使うと Safari で右に謎の空間が生まれる問題と解決策

結論

下記のように (1) Google Material Symbols を head タグで読み込み、 (2) Google Material Symbols を span タグで配置したものを (3) flex で並べると Safari でのみ右に謎の空間が生まれる模様。

<!DOCTYPE html>
<html lang="ja">
    <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          
          <!-- (1) Google Material Symbols を読み込む -->
          <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
    </head>

    <body>
          <!-- (3) flex で並べる -->        
          <header style="display: flex; justify-content: space-between;">
               <div>Title</div>
               
               <!-- (2) Google Material Symbols を span タグで配置する -->
               <span class="material-symbols-outlined">account_circle</span>
          </header>
    </body>
</html>

解決策

下記の通り、(4) Google Material Symbols を svgでダウンロードしてimgタグを利用する。
つまり、Google Material Symbols をタグで読み込み、 span タグで配置する方法をやめる。

<!DOCTYPE html>
<html lang="ja">
    <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>

    <body>
          <header style="display: flex; justify-content: space-between;">
               <div>Title</div>
               
               <!-- (4) Google Material Symbols を span タグで配置する -->
               <img src=/image/icon/account_circle.svg>
          </header>
    </body>
</html>

備考

developerツールを利用しても、上記の謎の空間が生まれない。