Тонкая линия при переполнении рендера: скрыта с граничным радиусом

Question

Чтобы реализовать некоторые причудливые раундовые индикаторы хода, я использовал элемент с радиусом границы и переполнением: скрытый. Все выглядит отлично, кроме одного: все браузеры отображают тонкую линию, где заканчивается переполнение.

вот несколько простых сниппет, который воспроизводит эту ошибку во всех основных браузерах:

function setMarginLeft(value){ 
 
\t var element = document.querySelector(".overflowing"); 
 
    element.style.marginLeft = value+"px"; 
 
} 
 
function setMarginTop(value){ 
 
\t var element = document.querySelector(".overflowing"); 
 
    element.style.marginTop = value+"px"; 
 
}

.backdrop { 
 
    background-color: white; 
 
    padding: 10px; 
 
    width:100px; 
 
    height:100px; 
 
} 
 
.circle { 
 
    background-color: red; 
 
    width:100px; 
 
    height:100px; 
 
    border-radius: 100px; 
 
    overflow:hidden; 
 
} 
 
.overflowing { 
 
    width:200px; 
 
    height:200px; 
 
    margin-top: -1px; 
 
    margin-left:1px; 
 
    background-color:#fff; 
 
} 
 
input { 
 
    margin-top:10px; 
 
}

<div class="backdrop"> 
 
    <div class="circle"> 
 
    <div class="overflowing"></div> 
 
    </div> 
 
</div> 
 
<em>Feel free to play around with these values:</em><br /> 
 
Top margin: <input type="number" id="cngMargin" oninput="setMarginTop(this.value)" value="-1"><br /> 
 
Left margin: <input type="number" id="cngMargin" oninput="setMarginLeft(this.value)" value="1">

, так как расположение не так легко, как выше фрагмент кода, я не могу изменить расположение много. Я предполагаю, что основная проблема заключается в антиалиасинге браузера, который, по моему мнению, не изменен css, или это так?

Я погубил себя глупо в этом вопросе и не могу придумать действительно полезный ресурс. я думаю, если ничего не будет работать, мне придется делать это заново в SVG или на холсте -.-

Answer 1

Это кажется возможным без наложения с помощью background-image с несколькими linear-gradient. JavaScript для вставки двух значений в объединенный linear-gradient довольно неуклюжий, так как я написал его поспешно, чтобы доказать это решение. Это может быть лучше!

Протестировано только в Chrome.

var marginTop = marginLeft = 0; 
 

 
function setMarginLeft(value) { 
 
    marginTop = value; 
 
    applyToCircle(); 
 
} 
 

 
function setMarginTop(value) { 
 
    marginLeft = value; 
 
    applyToCircle(); 
 
} 
 

 
function applyToCircle() { 
 
    var element = document.querySelector('.circle'); 
 
    element.style.backgroundImage = 'linear-gradient(90deg, red '+ marginTop + '%, transparent 0%), linear-gradient(180deg, red '+ marginLeft + '%, transparent 0%)'; 
 
}

.backdrop { 
 
    background-color:white; 
 
    padding: 10px; 
 
    width:100px; 
 
    height:100px; 
 
} 
 

 
.circle { 
 
    width:100px; 
 
    height:100px; 
 
    border-radius:50%; 
 
} 
 

 
input { 
 
    margin-top:10px; 
 
}

<div class="backdrop"> 
 
    <div class="circle"> 
 
    </div> 
 
</div> 
 
<em>Feel free to play around with these values:</em><br /> 
 
Top margin: <input type="number" id="cngMargin" oninput="setMarginTop(this.value)" value="0"><br /> 
 
Left margin: <input type="number" id="cngMargin" oninput="setMarginLeft(this.value)" value="0">