1721162 - touch simulation problem with bootstrap5 range

Status: NEW

(DevTools :: Responsive Design Mode, defect)

Description

[lingtalfi]

User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:89.0) Gecko/20100101 Firefox/89.0

Steps to reproduce:

Using bootstrap5 framework, here is my whole test code:

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>


<label for="customRange1" class="form-label">Example range</label>
<input type="range" class="form-range" id="customRange1">

Opening this page in firefox, with responsive mode on and touch simulation activated (blue icon).

Actual results:

When I try to move the ball of the range slider with the mouse (on a desktop), it doesn't move: it's stuck.

Expected results:

The expected behaviour was that when I try to move the ball of the range slider with the mouse (on a desktop), it should move accordingly.

Disabling the "touch simulation" (blue icon), I can move the ball with the mouse.

Alternately, uploading this page on a webserver and testing it from iphone7, I can move the ball with the finger by dragging it. Therefore the "touch simulation" doesn't behave like the real mobile device (at least not like the iphone7).

Comment 2

[Timea Cernea [:tbabos][inactive]]

Reproduced the issue on all the latest Firefox versions, the ball can't be moved on the slider if touch simulation is enabled. Works on Chrome as the reporter also mentioned. Moving this over to its component, thank you for this report!

Comment 3

[Nicolas Chevobbe [:nchevobbe]]

Looks similar to Bug 1742683.
Let's keep this bug open to see if there any bootstrap-specific issue around this