FirefoxでDnD APIを使うとゴーストの位置がずれる

HTMLのドラッグアンドドロップAPIを使用したところ、Firefox 62で下図のような挙動になってしまいました。

ゴーストが右下から現れたような感じになってます。
コードはこんな感じです。
HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div id="dialog">
        <div id="dialogContent">
            <ul id="dragList">
                <li draggable="true">HOGE</li>
                <li draggable="true">FUGA</li>
                <li draggable="true">PIYO</li>
                <li draggable="true">FOO</li>
                <li draggable="true">BAR</li>
                <li draggable="true">BAZZ</li>
            </ul>
        </div>
    </div>
    <script src="index.js"></script>
</body>

</html>

Javascript

var lis = document.querySelectorAll('li[draggable="true"]'),
    dragElem = null;

lis.forEach(function (li) {
    li.addEventListener('dragstart', function (e) {
        dragElem = this;
        e.dataTransfer.effectAllowd = 'move';
        e.dataTransfer.setData('text/html', this.outerHTML)
        this.classList.add('drag');
    });

    li.addEventListener('dragend', function (e) {
        dragElem.classList.remove('drag');
        dragElem = null;
    });
})

CSS

body {
    background-color: #fcfcfc;
    background-image: radial-gradient(#02a1e9 10%, transparent 20%), radial-gradient(#02a1e9 10%, transparent 20%);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
}

#dialog {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .4);
    z-index: 100;
}

#dialogContent {
    background: white;
    width: 600px;
    height: 600px;

    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#dragList {
    padding: 0;
    margin: 10px;
}

[draggable="true"] {
    cursor: grab;
    list-style: none;
    padding: 12px;
    border: 1px solid #eee;
    background: white;
}

[draggable="true"].drag {
    color: blue;
}

調査したところ、どうやらCSSの transform が良くないらしく、移動前の位置からゴーストが出現しているみたいです。
結局CSSを以下のように修正して解決しました。

︙
#dialogContent {
    ︙
    /*
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    */  
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
}
︙

ちなみに不思議な挙動をする方のコードを他のブラウザでも試してみたところ、

Firefox Nightly (Firefox 64.0a1)では同様の現象。
Google Chrome 69では想定通り元の要素と同じ位置から出現する。

なのでFirefox特有の仕様なのかバグなのか分かりませんが少なくとも暫くはこの挙動を考慮しなければならなそうです。

以上、小ネタでした。

<追記>
SafariとMicrosoft Edgeでも試したところ、そもそもゴーストが出ませんでした。

<追記2>
一応、改修後の挙動を載っけときます。

この記事をシェアする：

◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇　◇

私たちと一緒に働きませんか？

「FirefoxでDnD APIを使うとゴーストの位置がずれる」はいかがでしたか？
株式会社プレスマンでは、 WordPressが大好きな方、仕事を通してさらにスキルを磨きたい方を募集しています。まずは募集職種をご覧の上、お気軽にお問い合わせください。あなたとお会いできるのを楽しみにしています。

採用情報を見る