#positon

こんにちは。SHUNです。

デバイスのスクロール量を取得して、一定の位置までスクロールしたら、あるdivをposition:fixed;top:0;で固定表示させるコードを書いていました。

以下のような感じです。

setInterval(function(){ var obj = document.getElementById("obj"); if(window.pageYOffset > 100) obj.style.position = "fixed"; else obj.style.position = "relative"; }, 50);

Androidの場合は正常に100pxスクロールしたらobjが固定表示されていたのですが、iOSのSafariだと100pxスクロールしたタイミングで一瞬消えてしまうという現象が起きていました。

非常にマニアックなシチュエーションですが、下記の質問を発見！ http://stackoverflow.com/questions/18185736/prevent-fixed-position-element-from-flickering-during-jquery-animation

なんと、

transform: translateZ(0);-webkit-transform: translateZ(0);

を追加すれば正常に表示されるという驚くべき回答。

半信半疑でobjのstyleに上記２点を追加したところ、、 できたああああ！！