disable the border raduis styling on range elements

RESOLVED FIXED in Firefox 61

Status

()

defect
P3
normal
RESOLVED FIXED
2 years ago
Last year

People

(Reporter: colormatch, Assigned: kbrosnan)

Tracking

Firefox 58
Firefox 61
Points:
---

Firefox Tracking Flags

(fennec+, firefox59 wontfix, firefox60 wontfix, firefox61 fixed)

Details

Attachments

(2 attachments)

User Agent: Mozilla/5.0 (Windows NT 6.2; Win64; x64; rv:58.0) Gecko/20100101 Firefox/58.0
Build ID: 20180128191252

Steps to reproduce:

1) load https://kinoseed.com/
2) load a target image
3) click on image adjustment module (thumb in the middle) 


Actual results:

Rendering of the styling for range input sliders is not properly done.
See attached image.


Expected results:

Rendering of the styling for range input sliders is the same on all other platforms, including Firefox for Desktop, Chrome (desktop and android), and Safari
Thanks for reporting – what specifically is the difference between the sliders' styling? They look identical to me in the given screenshot.
Flags: needinfo?(colormatch)
(In reply to Michael Comella (:mcomella) [please needinfo for a response] from comment #1)
> Thanks for reporting – what specifically is the difference between the
> sliders' styling? They look identical to me in the given screenshot.

On FF-Android there's a border, which should not be there, and the layout is "not right" (not centered).
Flags: needinfo?(colormatch)
This is looking like two bugs. The border which Firefox for Android needs to fix. Lets make this bug fix that.

Which element? Centered vertically or horizontally? 

Vertical centering of the text seems to be a cross platform/browser issue adding a height to infomsg seems to fix this in Firefox and Chrome. Horizontal centering of the text seems reasonable. There may be an issue with Gecko overlapping the <input and <a class="infomsg" with the right hand <img width=32px src="data. I'll make a testcase from your site and see if there is an existing bug.
(In reply to Kevin Brosnan [:kbrosnan] from comment #3)
> This is looking like two bugs. The border which Firefox for Android needs to
> fix. Lets make this bug fix that.
> 
> Which element? Centered vertically or horizontally? 
> 
> Vertical centering of the text seems to be a cross platform/browser issue
> adding a height to infomsg seems to fix this in Firefox and Chrome.
> Horizontal centering of the text seems reasonable. There may be an issue
> with Gecko overlapping the <input and <a class="infomsg" with the right hand
> <img width=32px src="data. I'll make a testcase from your site and see if
> there is an existing bug.

I thought it may be css - parsing related, but if you think it's two separate bugs (I didn't find anything similar in the bug-search), please start a second bug report.

I'm not sure which exactly creates the bug, but only the <input element looks different.
The CSS used for the classes are those below:

.infomsg{
  color:#888;position:absolute;text-align:center;z-index:-1;width:100%;font-size:smaller;bottom:4px;
}
.slidecontainer {    
    width:98%; 
    display: flex;
    align-items: center; 
}
.slider {
    -webkit-appearance: none;
    width:96%;
    margin-left:2%;
    margin-right:2%;
    height: 18px;
    border-radius: 5px;
    background: #7895b0;
    outline: none;
    opacity: 0.6;
    -webkit-transition: .2s;
    transition: opacity .2s;
}
Assignee: nobody → kbrosnan
Status: UNCONFIRMED → NEW
Ever confirmed: true
Summary: css sliders (range input) styling not working as expected → disable the border raduis styling on range elements
tracking-fennec: ? → +
Priority: -- → P3
Comment on attachment 8951762 [details]
Kevin Brosnan - Bug 1435988 disable border radius styling on the range element -

https://reviewboard.mozilla.org/r/221036/#review227536
Attachment #8951762 - Flags: review?(snorp) → review+
Comment on attachment 8951762 [details]
Kevin Brosnan - Bug 1435988 disable border radius styling on the range element -

https://reviewboard.mozilla.org/r/221036/#review228468
Attachment #8951762 - Flags: review+
Keywords: checkin-needed
Pushed by ccoroiu@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/8cf686bb2f72
Kevin Brosnan - Bug 1435988 disable border radius styling on the range element - r=snorp
Keywords: checkin-needed
Duplicate of this bug: 1062980
Pushed by jwillcox@mozilla.com:
https://hg.mozilla.org/integration/autoland/rev/fa866711f588
Kevin Brosnan - Bug 1435988 disable border radius styling on the range element - r=snorp
https://hg.mozilla.org/mozilla-central/rev/fa866711f588
Status: NEW → RESOLVED
Closed: Last year
Resolution: --- → FIXED
Target Milestone: --- → Firefox 61
You need to log in before you can comment on or make changes to this bug.