表題のとおりです。
GPUレンダリングを有効にしたいからといって、
* { transform: translate3d(0, 0, 0); }
的なコードを書いているときに注意が必要です。
HTML
<main id="main"> <div class="inner"> <div id="btn"></div> </div> </main>
SCSS
html, body { height: 100%; background: #a3a3a3; } #main { position: relative; top: 50px; width: 100%; height: 100%; background: #e3e3e3; } .inner { position: absolute; top: 0; left: 0; min-height: 100%; width: 100%; height: auto; overflow: hidden; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } #gollira { position: fixed; top: 60px; left: 50%; margin-left: -150px; width: 300px; height: 300px; background: url(http://jsrun.it/assets/k/I/1/t/kI1t2.jpeg) center center no-repeat; background-size: cover; }