tweak iOS page scroll speed

最近在做 g0v.tw 的立法院公報 READER 雛形界面設計，看起來大概像這樣。

今天早上搭車的時候用 iPhone 打開，發現捲動速度慢到無法忍受，於是決定來作性能調教。

首先發現為了讓按鈕的效果美觀，我用了這樣的語法：

.log {
     .media {
        .btn {
            opacity: 0.3;
        }
        :hover {
            .btn {
                opacity: 1;
            }
        }
     }
}

因為 .log .media 有幾千個，而且每個 :hover 在 iOS trigger fake 的 click 效果的時候都會打斷 scroll，所以導致捲動速度奇慢無比。

再來原本是這樣一次插入所有的公報內容：

$('#log').append($logs);

原本以為只會 redraw 一次，但是在 iOS 上顯然不是。修改方式是：

$('#log').hide().append($logs).show();

最後是拿掉了原本包在公報內容外面的 Bootstrap Accordion。Bootstrap 的 Accordion 效果是 bootstrap-collapse.js 這個檔案做的。當裡面內容很長的時候，也會嚴重拖慢速度。

這些拿掉之後，iOS 底下的捲動速度又恢復成像飛的一樣了。