'gray line above input range on Safari
On Safari, there appears a gray line above the input range.
Here is the code. I have removed all &:: part from scss but did not work. There is no variable for black or gray color.So, that line is not coming from misuse of variables in scss.
<input
type="range"
name=""
id="program__progress"
className="onair__range"
min={0}
max={100}
style={style}
/>
@mixin track($fill: 0) {
box-sizing: border-box;
border: none;
width: $track-w;
height: $track-h;
border-radius: 5px;
background: $track-c;
@if $fill == 1 {
.js & {
background: linear-gradient($filll-c, $filll-c) 0 / var(--sx) 100% no-repeat $track-c;
}
}
}
@mixin fill() {
height: $track-h;
background: $filll-c;
}
.onair__range {
&,
&::-webkit-slider-thumb {
-webkit-appearance: none;
@include animation();
}
-webkit-appearance: none;
--range: calc(var(--max) - var(--min));
--ratio: calc((var(--val) - var(--min)) / var(--range));
--sx: calc(0.5 *#{$thumb-d} + var(--ratio) * (100% - #{$thumb-d}));
padding: 0;
border-radius: 5px;
width: $track-w;
height: $track-h;
background: lightgray;
border: none;
color: transparent;
&::-webkit-slider-runnable-track {
@include track(1);
}
&::-moz-range-track {
@include track;
}
&::-ms-track {
@include track;
}
&::-moz-range-progress {
@include fill;
}
&::-ms-fill-lower {
@include fill;
}
&::-ms-tooltip {
display: none;
}
}
How can i remove it?
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|

