javascript – grey line above enter vary on Safari

On Safari, there seems a grey line above the enter vary.

Right here is the image:

Right here is the code. I’ve eliminated all &:: half from scss however didn’t work. There isn’t any variable for black or grey coloration.So, that line shouldn’t be coming from misuse of variables in scss.

                <enter
                    sort="vary"
                    title=""
                    id="program__progress"
                    className="onair__range"
                    min={0}
                    max={100}
                    fashion={fashion}
                />


           @mixin monitor($fill: 0) {
                box-sizing: border-box;
                border: none;
                width: $track-w;
                top: $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() {
                top: $track-h;
                background: $filll-c;
            }

            .onair__range {
                &,
                &::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    @embody 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;
                top: $track-h;
                background: lightgray;
                border: none;
                coloration: clear;

                &::-webkit-slider-runnable-track {
                    @embody monitor(1);
                }
                &::-moz-range-track {
                    @embody monitor;
                }
                &::-ms-track {
                    @embody monitor;
                }

                &::-moz-range-progress {
                    @embody fill;
                }
                &::-ms-fill-lower {
                    @embody fill;
                }

                &::-ms-tooltip {
                    show: none;
                }
            }

How am i able to take away it?