【CSS3】マウスオーバーすると凹むボタンを作ったら、一時的に位置ズレが発生する。

Question

あるwebサイトでマウスオーバーすると押した感じが出るボタンを作成しました。

margin-top/margin-bottom/box-shadowの3つのプロパティを操作して凹ませています。
その際、transitonで少しアニメーションを加えて滑らかに凹むようにしました。
以下が対象のボタンのSCSSになります。

a {
                          display: inline-block;
                          width: 100%;
                          letter-spacing: 0.5px;
                          color: #fff;
                          word-break: break-all;
                          word-wrap: break-word;
                          text-align: center;
                          vertical-align: middle;
                          line-height: 2.5;
                          background-color: rgb(4,187,129);
                          box-shadow: 0 4px 0 rgba(1,130,89,0.9);
                          border-radius: 4px;
                          margin-top: 0;
                          margin-bottom: 4px;
                          -webkit-box-sizing: border-box;
                        　box-sizing: border-box;
                          -webkit-backface-visibility:hidden;
                          backface-visibility:hidden;
                          transition-property:background-color,box-shadow,margin;
                          transition-duration:0.1s;
                          -webkit-transition-duration:0.1s;
                          transition-timing-function: linear;
                          -webkit-transition-timing-function: linear;
                          -webkit-backface-visibility:hidden;
                          backface-visibility:hidden;
                          &:hover {
                            margin-top:2px;
                            margin-bottom: 2px;
                            box-shadow: 0 2px 0 rgba(1,130,89,0.9);
                          }
                          &:active {
                            margin-top: 4px;
                            margin-bottom: 0px;
                            box-shadow: none;
                          }

このボタンをSafari（必ず再現する）やChrome（再現するボタンと再現しないボタンあり）上でマウスオーバーすると、ボタンから見て画面下の位置にある並列&子要素もアニメーションするような感じで一時的に動いてしまいます。

いろいろ調べてbackface-visibility以外の解決策が見つからず、これだと解決していません。

もしどなたかこのような事象に心当たりがある方がいれば原因や解決策を教えていただけると幸いです。

Comments

[kei344]

記法がCSSでは有りません。出力されたCSSを提示されるか記法について明記されてはいかがでしょうか。

[gogoackman3]

失礼しました。SCSSと書き直しています。

Answer 1

原因としてプロパティmargin-top,margin-bottomの操作によるリフロー(再レイアウト)の発生が考えられます. 論理的に同等なtransform: translate()で置き換えられないか検討して下さい. (transformによるアニメーションであれば再描画処理のみで済みます)

Comments

[gogoackman3]

ありがとうございます。やってみたところ、safariでは完璧になりました。chromeだとbox-shadowが変化する時間とtransform:translateYで縦位置をズラす時間の所要時間が異なり、多少ピクッとしますが、他の要素に影響が出ることがなくなりました。もう少し自分で調査してみたいと思います。