CSSで作成したハンバーガーメニューの真ん中が透ける

Question

CSSでハンバーガーメニューを作りたい

sp時に表示されるハンバーガーメニューをcssで作成したいです。
spanタグを３つ使い、バックグラウンドカラーを当てて、positionを使って均等に並べているのですが、spanの高さが1pxの時に真ん中が透けてしまいます。
spanの高さが2pxの時には透けません。

該当のソースコード

<div class="forSp">
        <div class="header_logo">
          <img class="logo_img">
        </div>
        <div class="header_hamburger js-trigger-nav">
          <span class="header_hamburger-part"></span>
          <span class="header_hamburger-part"></span>
          <span class="header_hamburger-part"></span>
        </div>
      </div>

.header_hamburger {
  height: 28px;
  position: absolute;
  top: 15px;
  right: 15px;
  width: 34px;
  z-index: 100001;
}

.header_hamburger.is-active .header_hamburger-part {
  background-color: #304529;
}

.header_hamburger.is-active .header_hamburger-part:first-child {
  top: 50%;
  -webkit-transform: translateY(-50%) rotate(45deg);
          transform: translateY(-50%) rotate(45deg);
}

.header_hamburger.is-active .header_hamburger-part:nth-child(2) {
  display: none;
}

.header_hamburger.is-active .header_hamburger-part:last-child {
  bottom: 50%;
  -webkit-transform: translateY(50%) rotate(-45deg);
          transform: translateY(50%) rotate(-45deg);
}

.header_hamburger-part {
  position: absolute;
  width: 100%;
  padding-top: 2px;
  background-color: #fff;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
}

.header_hamburger-part:first-child {
  top: 0;
}

.header_hamburger-part:nth-child(2) {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.header_hamburger-part:last-child {
  bottom: 0;
}

Comments

[m.ts10806]

>真ん中が透けてしまいます。
どういう現象か文章だけではイメージがあまりつかないので、画面キャプチャご提示ください。

[yoshinavi]

提示のコードで症状は再現されますか？

Answer 1

.header_hamburger-part:nth-child(2) の
transformを削除して下記のようにすれば透けなくなります。

.header_hamburger-part:nth-child(2) {
  top: 50%;
}