Drag preview разные стили

Интересует вопрос поведения Drag preview у draggable элементов, в частности, какие свойства влияют на изменения его отображения?

Когда-то превью прозрачное

Но при изменении некоторых условий (высота, ширина, масштаб окна) превью становится менее прозрачным (см. желтый).

Причем, это происходит в лайв режиме. Изменил соотношение сторон браузера, изменилось поведение. Я попробовал несколько вариантов назначения высоты и ширины: фиксированные, в зависимости от высоты/ширины окна (vh/vw), но так или иначе, при изменении высоты/ширины или масштаба окна браузер, какой-то из элементов изменяет свое отображение превью.

Возможно, кто-нибудь подскажет правила, по которым происходит изменение стиля?

Не забывайте пример во все окно разворачивать.

let dp200 = document.getElementById("drag-preview-200");
let dp500 = document.getElementById("drag-preview-500");
let preview200 = document.createElement('img');
let preview500 = document.createElement('img');
preview200.setAttribute('src', 'https://via.placeholder.com/200.png/09f');
preview500.setAttribute('src', 'https://via.placeholder.com/500.png/3f1');



dp200.addEventListener("dragstart", (event)=>{
event.dataTransfer.setDragImage(preview200, 150, 150);
console.log();
})

dp500.addEventListener("dragstart", (event)=>{
event.dataTransfer.setDragImage(preview500, 150, 150);
console.log();
})

.drag-px-small{
  width: 300px;
  height: 300px;
  background: lightblue;
}
.drag-px-big {
  width: 400px;
  height: 400px;
  background: lightgreen;
}

.drag-vw{
  width: 25vw;
  height: 25vw;
  background: red;
}
.drag-vh {
  width: 25vh;
  height: 25vh;
  background: pink;
}

.drag-vwvh {
  width: 25vw;
  height: 25vh;
  background: tan;

}

.drag-preview {
width: 200px;
height: 200px;
}

#drag-preview-200 {
background: purple;
}

#drag-preview-500 {
background: brown;
}

<div class="drag-px-small" draggable="true">
px: 300x300
</div>
<div class="drag-px-big" draggable="true">
px: 400x400
</div>
<div class="drag-vw" draggable="true">
vw: 25x25 
</div>
<div class="drag-vh" draggable="true">
vh: 25x25 
</div>

<div class="drag-vwvh" draggable="true">
vw/vh: 25x25
</div>
<div class="drag-preview" id="drag-preview-200" draggable="true">
Small custom drag preview / dataTransfer.setDragImage
</div>

<div class="drag-preview" id="drag-preview-500" draggable="true">
Big custom drag preview / dataTransfer.setDragImage
</div>

Примечание

В ходе обсуждения подтвердился факт того, что на разных ОС и разных браузерах поведение dragPreview различается.

• Windows. Firefox. Поведение в FF отличается от поведения в Chrome и Opera, в частности, FF начинает добавлять прозрачный градиент при одинаковых условиях, голубой кубик 300х300 пикселей, из исходного примера выше, в FF при 100% масштабе имеет градиент с прозрачностью, в то время как в Opera и Chrome на 300х300 кубе градиента в dragPreview нет.
• Linux. Firefox. Градиент отсутствует полностью. В случае, если элемент драга занимает большУю площадь окна, FF уменьшает размер dragpreview (см. картинку ниже). При назначении setDragImage dragPreview появляется без градиента и без размера для больших элементов.

ОС:Linux, Браузер: Firefox, Размер элемента: 400x400xp, масштаб 150%

ОС:Linux, Браузер: Firefox, Размер setDragImage: 500x500xp, масштаб 100%. При увеличении масштаба окна браузера поведение не изменяется. Увеличение масштаба окна браузера влияет на увеличение масштаба dragPreview.

ОС:Linux, Браузер: Firefox, Размер setDragImage: 500x500xp, масштаб 170%.

• Linux. Opera. Градиент отсутствует полностью. DragPreview всегда отображается по размерам исходного элемента. При увеличении масштаба окна отображение не изменяется.

• Linux. Opera. Масштабирование окна не применяется к масштабированию картинки, назначенной через setDragImage (см пример ниже)

ОС:Linux, Браузер: Opera, Размер элемента 400х400px, масштаб 175%. Масштабирование окна браузера влияет на размер dragPreview

ОС:Linux, Браузер: Opera, Размер setDragImage 500х500px, масштаб 175%. Масштабирование окна браузера НЕ влияет на dragPreview.

Вывод

Судя по всему, поведение dragPreview реализуется в каждом браузере для каждой операционной системы по разному. Как следствие, независимо от того, используется setDragImage или нет, реальной возможности контроля отображения dragPreview, при использовании html draggable, нет, и во всех браузерах/операционных системах dragPreview будет отображаться с некоторыми отличиями.

Тем не менее, некоторые из результатов обсуждения могут быть кому-либо интересны и полезны.