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)
Tracking
(fennec+, firefox59 wontfix, firefox60 wontfix, firefox61 fixed)
RESOLVED
FIXED
Firefox 61
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)
Reporter | ||
Comment 2•6 years ago
|
||
(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)
Assignee | ||
Comment 3•6 years ago
|
||
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.
Reporter | ||
Comment 4•6 years ago
|
||
(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 | ||
Updated•6 years ago
|
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: --- → ?
tracking-fennec: ? → +
Priority: -- → P3
Comment hidden (mozreview-request) |
Comment 6•6 years ago
|
||
mozreview-review |
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+
Assignee | ||
Comment 7•6 years ago
|
||
mozreview-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+
Assignee | ||
Updated•6 years ago
|
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
Comment 9•6 years ago
|
||
Backed out changeset 8cf686bb2f72 (bug 1435988) for failing revtest in moz-range-progress-1.html https://treeherder.mozilla.org/#/jobs?repo=autoland&revision=7f5e205a73ed5a46cee96379bf1d13d1079b1a4c&filter-classifiedState=unclassified https://hg.mozilla.org/integration/autoland/rev/7f5e205a73ed5a46cee96379bf1d13d1079b1a4c
Comment hidden (mozreview-request) |
Comment 12•6 years ago
|
||
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
Comment 13•6 years ago
|
||
bugherder |
https://hg.mozilla.org/mozilla-central/rev/fa866711f588
Status: NEW → RESOLVED
Closed: 6 years ago
status-firefox61:
--- → fixed
Resolution: --- → FIXED
Target Milestone: --- → Firefox 61
Updated•6 years ago
|
status-firefox59:
--- → wontfix
status-firefox60:
--- → fix-optional
Updated•6 years ago
|
Updated•3 years ago
|
Product: Firefox for Android → Firefox for Android Graveyard
You need to log in
before you can comment on or make changes to this bug.
Description
•