Chromeの ChatWorkタブが固まる方へ

先日（ブックマーク機能が追加されたころ？）からチャットワークを開いているタブが、不定期に固まるようになってしまいました。
一度固まってしまうと、タブを閉じて開き直さないと全く動かない状況になります。

この記事の対象は、エクステンションの「Chatwork Quick Info Input」を使用し、且つ、画面の高さを縮めている方になります。

環境

Chromeバージョン：91.0.4472.77
エクステンション：Chatwork Quick Info Input （Ver. 3.0.3）

対処法

問題点

原因としては、コンテンツ部分の高さを削っているCSS部分にあるようです。
その中でも、ヘッダー上部のグループ名があるバーの高さを変えて調整している部分になります。
スクロールして読み込みを行おうとする際に固まる確率が高かったです。（詳細調査はしていません。）

解決法

エクステンションの【実験】縮んだり伸びたりします という機能は使用せず、問題となるCSS部分を除いて読み込むようにします。

ChromeローカルでCSSを追加できるエクステンション「Stylus」というものがありますので、こちらをインストールします。

https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

Stylusの使い方については、明記しませんので、下記参考サイトをご確認ください。
https://atstudiota.exblog.jp/27122400/

問題となる部分を削った下記CSSを登録します。

.roomListItem,
#_roomListArea li[role="listitem"] {
  padding: 0 28px 0 8px!important;
}
#_roomListArea li[role="listitem"] > div:first-of-type > div:first-child {
  height: 28px;
}
#_roomListArea li[role="listitem"] > div:first-of-type > div:first-child > img {
  width: 28px;
  height: 28px;
}
#_roomListArea li[role="listitem"] > div:first-of-type > div:nth-child(2) {
  padding: 2px 0 0 0;
}
#_roomListArea li[role="listitem"] > div:nth-child(2) {
  top: calc(0.3em)!important;
}
.roomListItem .avatarMedium {
  width: 27px!important;
  height: 27px!important;
}
.timelineMessage * {
  line-height: 1.3em!important;
}
.globalHeader {
  height: 34px;
}
.content {
  top: 34px;
  height: calc(100% - 34px);
}
#_addStyle {
  display: none;
}