第一次貢獻開源就緊張到手抖

發表於 2020-12-06 分類於 frontend

前言

在此紀錄人生第一次貢獻開源專案的背景和 debug 過程，好啦我也不確定算不算開源，因為是「程式導師實驗計畫」裡面使用到的「學習系統」，使用者就是課程裡的老師、助教和學生，維護者主要是老師 Huli 和助教 minw。雖然這次的貢獻蠻微小的，但因為還是挺興奮的，不記錄一下說不過去吧！！

（此次 PR 時間為 2020/9/27）

背景

發這次 PR 起源於課程在 9 月台南的小聚會時，其中一位同學說最近使用學習系統時有個很惱人的 bug，我們的學習系統的心得頁是一堆學生的心得卡片，上面會顯示每個同學關於學習的過程，或一些日常生活（By the way，比起學習，我更愛看日常生活的紀錄），預設是每次顯示 20 筆，要看更多的話就要滑到網頁底部，按下「載入更多」的按鈕，載入更之前的 20 筆心得。

行為大概會像是下面這張圖：

loadmore

而擾人問題的情形，也顯示在上面這張圖。

通常點 load more 的按鈕後，比較好的使用者體驗是你瀏覽器的 scroll bar 不會移動，維持在剛剛的高度，而只要往下滑就可以看到剛剛點 load more 得到的 20 筆資料。

但從上面那張圖可以看到他不是這樣，你不管怎麼點 load more 按鈕，瀏覽器的 scroll bar 都會在最底部，導致你每載入一次心得又要往上滑，才能找到剛剛看到哪裡，如果每次想看更多心得都要重複這行為，真的是會覺得這網頁頗機歪。

幸好同學頗熱心的在學習系統的前端 repo 發了 issue，內容還很完整，作業系統、瀏覽器等等都幫忙先測了一遍，讓我少了蠻多定位問題的功夫，同學讚啦。

查找過程

接著就是開始思考問題出在哪的過程了，因為問題的資訊提供蠻足夠的關係，過程挺順利的。

同學的 issue 提到：

用 chrome 看進度報告，點擊「載入更多」載入後會直接跳到頁面底部。
不過使用電腦的 safari 還有手機的 chrome 與 safari 都沒有這個問題，載入後頁面仍然停留在剛剛看到的最後一篇心得。
有嘗試重新設定 chrome 不過沒有用。

初步定位問題是出在每個瀏覽器的行為不一致，而過去使用學習系統時沒有這個問題，猜測是 Chrome 在某個版本改了 scroll bar 的行為。

所以一開始的關鍵是「Chrome load more button problem」，超級直白，結果好死不死還真的找到這篇 Load More Button Click Issue ，裡面有位 Hassan Tahir 大大提到：

Managed to find a hotfix for now: add overflow-anchor: "none", to the CSS properties of the button, or even the parent. See https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-anchor

看了 MDN 的敘述，overflow-anchor property 看起來是能夠改變瀏覽器 scroll anchor 的行為，避免載入更多時的頁面跳動，造成不好的使用者體驗。而解決辦法也很簡單，就是在那顆按鈕或者是它的 parent 加上 overflow-anchor:none 就好了，非常滴神奇。

後續

好奇之下，也開始想說 Chrome 的 scroll bar 預設行為到底是怎麼回事，為什麼狠狠的一夜之間換了行為，讓我變成了大人？

CodI9CMUEAA9vlg

找著找著發現了這篇文 Scroll anchoring for web developers，文章大致上是在說 Chrome 在 version 56 的時候改變了滾動的行為，裡面說到：

Similar to other features designed to protect our users from bad experiences, starting in version 56 Chrome prevents these unexpected page jumps with a new feature called scroll anchoring. This feature works by locking the scroll position on an on-screen element to keep our users in the same spot even as offscreen content continues to load.

嗯嗯我十分同意…不對啊如果是這樣，那為什麼會發生今天的問題！所以應該是在某個版本有改變 scroll bar 的行為吧？

所以就又找到了幾篇文也在提問相關的問題，像是 ionic 框架的論壇有篇 New scroll behaviour: Always scrolls to the former position、或者是剛剛的 Load More Button Click Issue 、Chrome v84/85 追加元素后滚动条位置问题、或是 Bootstrap 的 issue Accordion scroll behavior in Chrome #31341，都提到 Chrome 在 v84 之後的 scroll anchor 的預設行為改變了。

看來下一步就是要去找 Chrome 更新的 log，所以我跑去找了 New in Chrome 84，翻了一翻都沒有，搜尋「scroll」或是「anchor」也都沒有，但說不定原因是這個改變不是 New in Chrome 84，而是舊行為被更改了，所以發在其他文章裡面嗎？像是關於棄用、修改的文章，所以又去找了 Deprecations and removals in Chrome 84，ok 看來還是沒有。

之後東翻西找下了各種關鍵字，還是找不到關於 scroll bar 在 Chrome v84 被修改的細節是什麼，或是也沒有任何線索，就暫時先放下它啦。

結語

翻找文章翻得好累。

然後我也不算這算不算貢獻開源，因為只有這個課程的學生才會用到的系統，不過過去都是在自己的 repo、和其他人協作的狀況下發 PR，這次算是第一次發給沒有參與的公開專案發 PR，真的是蠻緊張的的欸乾，在 commit 前還瘋狂確認有沒有任何地方改錯，深怕造成別人的困擾。

前端癢癢 der

第一次貢獻開源就緊張到手抖

前言

背景

查找過程

後續

結語

References