2087759 - overflow: hidden on range input doesn't make it a scrollport for the thumb element

Status: NEW

(Core :: Layout: Form Controls, defect, P3)

Description

[Temani Afif]

Steps to reproduce

Consider the following demo: https://codepen.io/t_afif/pen/xbqyJWY/eacf797b645198dc8120dc7ae344437b

The idea is to update the value of the output based on the thumb position. The value should be within the min and max boundary defined as variable.

Actual results

It does work but the values aren't correct due to a scrollport issue.

Expected results

The use of overflow: hidden on the input should turn it into a scrollport for the thumb, but that's not the case; the thumb is considering the viewport (resizing the screen will also update the value).

We may think overflow: hidden is not working at all, but it's hiding the border-image overflow (uncomment it to notice this).

Adding overflow: hidden to the label element, which has the same input dimensions, will fix the issue so the scroll-driven animations work fine.

Comment 1

[Emilio Cobos Álvarez [:emilio]]

This is basically "range inputs don't create scrollframes because they're replaced elements".

The internal layout of these is undefined per spec... We should probably make range inputs work in terms of "normal" CSS, but there's basically a thousand ways to do that with different implications for authors...