Open Bug 1721162 Opened 3 years ago Updated 2 years ago

touch simulation problem with bootstrap5 range

Categories

(DevTools :: Responsive Design Mode, defect)

Firefox 89
defect

Tracking

(firefox90 affected, firefox91 affected, firefox92 affected)

Tracking Status
firefox90 --- affected
firefox91 --- affected
firefox92 --- affected

People

(Reporter: lingtalfi, Unassigned)

References

(Depends on 1 open bug, Blocks 1 open bug)

Details

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).

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!

Status: UNCONFIRMED → NEW
Component: Untriaged → Responsive Design Mode
Ever confirmed: true
Product: Firefox → DevTools
Severity: -- → S3

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

Blocks: rdm-touch
Depends on: 1742683
You need to log in before you can comment on or make changes to this bug.