In a window, when its size is between whether or not the scrollbar is visible, the style's width determination loops endlessly and the display is too violent.

[tamaina]

💡 Summary

ウィンドウで、そのサイズがスクロールバーが表示されるかどうかの間になっているとき、スタイルの幅の判定が無限ループして表示が荒ぶる

https://user-images.githubusercontent.com/7973572/187453682-d89dca39-c066-43da-a420-23717daf6864.mp4

🥰 Expected Behavior

表示が固定される

🤬 Actual Behavior

表示が荒ぶる

📌 Environment

Misskey version: Misskey v12.118.1 Your OS: Windows 11 Your browser: Microsoft Edge バージョン 104.0.1293.70 (公式ビルド) (64 ビット)

[syuilo]

サイズ判定の際にスクロールバーの幅を足せば解決

[tamaina]

これいい加減解決しなきゃな

[tamaina]

一番めんどくさいくないのはoverflow-y: scrollにしてスクロールバーを常に表示させること

[tamaina]

サイズ判定の際に

うーん、普通のflexboxでも荒ぶったりするんでなぁ

[tamaina]

https://user-images.githubusercontent.com/7973572/204084415-c2854f31-ba4f-4bec-b3ae-d7eb42d332ee.mov

と思ったけどこれflexboxが原因じゃない？

どこでどういうサイズ判定が働いているのかわかってない

[tamaina]

https://github.com/misskey-dev/misskey/blob/8b9dc962ae7b04354c65f6e80ad0e9a6bafd57ea/packages/client/src/components/global/MkSpacer.vue#L2

ここら辺かな

[tamaina]

paddingの指定

[tamaina]

clientWidthにすればいいかな？

[Trif4]

I noticed a similar issue when sending chat messages sometimes on desktop, however, I wasn't able to figure out the reproduction steps.

But it seemed to happen when the chat composer box was above the bottom of the screen. If I scrolled up, it would resolve it.

I don't know if it's related to this, but I thought I'd mention it in case.

[tamaina]

再現性については、あるサイズにウィンドウを狭めると必ず発生します

clientWidthにすればいいかな？

逆では(offsetWidthの方がスクロールバーを含んでいる)

[tamaina]

ResizeObserverの反復実行にリミットをつけた方が良さそうだな

[acid-chicken]

https://github.com/misskey-dev/misskey/blob/8b9dc962ae7b04354c65f6e80ad0e9a6bafd57ea/packages/client/src/components/global/MkSpacer.vue#L44

これ本当？

[tamaina]

これ本当？

Safari 15.4から対応なので妥当なコメント

https://caniuse.com/mdn-api_resizeobserverentry_borderboxsize