'gray line above input range on Safari

On Safari, there appears a gray line above the input range.

Here is the picture: enter image description here

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