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

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

p1.a9z.dev.2022-08-30.22-36-46.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]

2022-11-26.19.33.36.mov

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

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

[tamaina]

misskey/packages/client/src/components/global/MkSpacer.vue

Line 2 in 8b9dc96

<div ref="root" :class="$style.root" :style="{ padding: margin + 'px' }">

ここら辺かな

[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]

misskey/packages/client/src/components/global/MkSpacer.vue

Line 44 in 8b9dc96

/* iOSが対応していない

これ本当？

[tamaina]

これ本当？

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

https://caniuse.com/mdn-api_resizeobserverentry_borderboxsize