draggable="false" and user-select: none don't work together on <img> tags

[jack-jjm]

What happened?

In this JSFiddle, I have an <img> tag equipped with draggable="false" (in HTML) and user-select: none (in CSS). This should mean two things are true:

1. When you click and drag the image, you don't see a "ghost" translucent copy of the image get dragged away from it. (because of draggable="false")
2. When you click near the image and drag over it, it doesn't get selected, i.e. it doesn't get visibly highlighted like text. (because of user-select: none).

In Chromium and Firefox 104, both conditions are true. In Waterfox G4 1.5, only the second is true: adding user-select: none seems to disable the effect of the draggable attribute in the HTML. You can try disabling the user-select directive in the CSS and see that the dragging behavior gets disabled, so the issue really seems to be a conflict between these two things.

Reproducible?

• [x] I have tested this on Firefox.

Version

G4

What platform are you seeing the problem on?

Linux

Relevant log output

No response