[JS][CSS] resizeがmouseupをキャッチできていない

２つのhtmlを横並びに表示し、その幅をドラッグで変えられるhtmlを作成しようとしました。
左側のdivにresizeを設定して、resizeに応じて右側の幅を変えるようにしました。

おおむね動くのですが、左のdivの右下のつまみを掴んでドラッグした後、
**つまみの上でmouseupしないと、**その後ページのまったく関係ないところをドラッグしてもresizeされてしまうようになります。
(ChromeとEdgeで確認しました)

憶測ですが、resizeはmouseupイベントを使用していて、そのmouseupイベントが、ドラッグを開始した要素上でmouseupしないと走らないことが原因なのかな…と考えています。

憶測が正しいか
これを回避するにはどうするのが良いか

ご教授いただけないでしょうか。

html
1<html>
2
3<head>
4    <link rel="stylesheet" href="style.css">
5</head>
6
7<body>
8    <div class="wrap-box">
9        <div class="left cell"><iframe src="TodaysFlow.html" class="left frame"></iframe></div>
10        <div class="right cell"><iframe src="CurrentStatus.html" class="right frame"></iframe></div>
11    </div>
12    <script>
13        const leftbox = document.querySelector('.left', '.cell');
14        const rightbox = document.querySelector('.right', '.cell');
15        //イベント登録
16        document.addEventListener('DOMContentLoaded', () => {
17            //要素のリサイズイベント取得
18            const observer = new MutationObserver(() => {
19                //要素のサイズ確認
20                rightbox.style.width = `calc(99% - ${leftbox.style.width})`;
21            })
22            observer.observe(leftbox, {
23                attriblutes: true,
24                attributeFilter: ["style"]
25            })
26        }, false)
27    </script>
28</body>
29
30</html>

css
1.box {
2    width: 100%;
3    height: 100%;
4    font-size: 0;
5}
6
7.cell{
8    display: inline-block;
9    width: 48%;
10    height: 100%;
11    box-sizing: border-box;
12    margin: 0%;
13    overflow: hidden;
14}
15
16.cell.left{
17    resize: horizontal;
18    margin-right: 5px;
19}
20
21.frame{
22    width: 100%;
23    height: 100%;
24}

Lhankor_Mhy

2021/12/13 00:55

問題が再現しませんでした。もう少し再現手順を詳しくお願いできますか？

int32_t

2021/12/13 06:08

似たようなバグがありました。https://bugs.chromium.org/p/chromium/issues/detail?id=118806 とりあえずスターを付けておきましょう。

achasute

2021/12/13 09:59

Lhankor_Mhy様手順としては、 1. 記載のhtmlとstyle.cssを準備する 2. inframeに入れるhtmlを２つ作成する(大きさは十分大きなものでお願いします：1000pxとか) 3. htmlファイルを開いて、左側のinframeの、右下のつまみをドラッグし、つまみ以外の場所でマウスアップする 4. 任意の場所、例えばを右側のinframeのスクロールバーなどをドラッグする →左側のinfarmeがresizeされるというものになります。お手数おかけいたします。