1418034 - select renders different based on presence of `border-radius` property

Status: UNCONFIRMED

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

Description

[valtron2000]

Attachment: Clipboard02.jpg

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20171112125346

Steps to reproduce:

1. Go to https://jsfiddle.net/f9ack54s/2/
2. Inspect `select#br` element
3. In inspector, disable `border-radius: 0` rule


Actual results:

The select is not repainted immediately after disabling the rule. However, after interacting with the `select#br`, a repaint that gets triggered by something else will change how the select looks.


Expected results:

The select box should look the same, regardless of `border-radius` being set, since `border-radius:0` is the default. However, based on whether that rule is present or not, the `select` renders differently (see attached image).

The fact that repainting is not triggered when the property is changed in the inspector indicates that, on the "computed" level, FF knows the CSS hasn't changed; so it must be something else that affects the rendering depending on whether `border-radius` is explicitly set or not.

Comment 1

[valtron2000]

Likely related: https://bugzilla.mozilla.org/show_bug.cgi?id=1418031

Comment 2

[Mike Taylor [:miketaylr]]

Attachment: select-br.html

Comment 3

[Mike Taylor [:miketaylr]]

I tested this going back to 52, and it's the same. So not likely a recent regression, if one at all. 

Also, Chrome displays both differently as well, so it's possible this is expected behavior (and possibly INVALID). But layout folks can decide that.

Comment 4

[mshani]

The rendering of an element in HTML and CSS can indeed vary based on the presence or absence of the border-radius property.

1. Without border-radius: When the border-radius property is not applied to an element, it will have sharp, straight edges. This means that corners of the element, such as divs or buttons, will appear square with no rounding.

2. With border-radius: When the border-radius property is used and given a value greater than 0, the corners of the element become rounded. This creates a softer and more visually appealing appearance. The larger the border-radius value, the more pronounced the rounding of the corners.

The border-radius property allows web developers to create various design effects, such as rounded buttons, circular avatars, or speech bubble-like shapes. It's a key styling property for achieving a wide range of aesthetics in web design.
https://foleyauctioneers.ie/