endokのブログ

IT・プログラミングネタ

Bootstrapでpull-leftしたアイコンを含む要素を表示/非表示するとその要素のテキスト、背景色が消える(iPhone Safariで発生)

Bootstrap iPhone

原因よくわからないものの解決したのでとりあえずメモ。
かなり状況は限定的。

環境

Bootstrap 3.3.2
jQuery 1.11.2
iPhone6（iOS8.1.3）

現象

下記の"Button"を押すと左の"LEFT"がtoggleするようになっている。

"Button"を２回押して非表示→表示とすると、LEFTというテキスト、背景色が消える。

サンプルコードは下記。

<html lang="ja">
<head>
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
  <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>

  <style>
    body {
      font-size: 16px;
    }
    .left {
      background-color: skyblue;
    }
    .right {
      background-color: yellow;
    }
  </style>
</head>  
<body>
  <div class="container">
    <div class="clearfix">
      <div class="pull-left left">
        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
        LEFT
      </div>
      <div class="pull-right right">
        RIGHT  
      </div>
    </div> 
    <button id="btn">Button</button>
  </div>

  <script>
    $(function(){
      $("#btn").on("click", function(){
        $(".left").toggle();
      });
    });
  </script>
</body> 
</html>

発生条件

下記条件を満たすときに発生する（本当はもっと細かい条件があるかもしれないが調べきれていない）

  • pull-left(float: left)した要素をclearfixクラスでクリアしている。
  • pull-leftしている要素内にglyphiconがある。
  • pull-leftしている要素をjQuery.toggle()する。
  • iPhoneのsafariで表示したときに発生する。（PCのChromeでは発生しない）

解決方法

pull-leftする要素とtoggleする要素を分離する。

    <div class="clearfix">
      <div class="pull-left">
        <div class="left">
          <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
          LEFT
        </div>
      </div>
      <div class="pull-right right">
        RIGHT  
      </div>
    </div>