Closed Bug 1435988 Opened 6 years ago Closed 6 years ago

disable the border raduis styling on range elements

Categories

(Firefox for Android Graveyard :: General, defect, P3)

Firefox 58
defect

Tracking

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

RESOLVED FIXED
Firefox 61
Tracking Status
fennec + ---
firefox59 --- wontfix
firefox60 --- wontfix
firefox61 --- fixed

People

(Reporter: colormatch, Assigned: kbrosnan)

References

Details

Attachments

(2 files)

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
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: 6 years ago
Resolution: --- → FIXED
Target Milestone: --- → Firefox 61
Product: Firefox for Android → Firefox for Android Graveyard
You need to log in before you can comment on or make changes to this bug.