Дополнительный пиксель в до и после псевдоэлементов

Question

Я пытаюсь создать фоновый эффект, используя псевдоэлементы до и после, делая его на один пиксель выше и шире, чем фактический элемент, но всегда кажется, что он имеет один дополнительный пиксель вправо или влево. Это происходит только тогда, когда браузеры развернуты (Firefox, Chrome и Edge), но не происходит, когда браузер имеет меньшую ширину.

*, *::before, *::after{ box-sizing: border-box; }

body {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    background-color: #111;
}

img {
    max-width: 300px;
    display: block;
    padding: 4px;
}

.main-box {
    position: relative;
}

.img-box {
    padding: 0;
    margin: 0;
    background-color: #000;
}

.img-box::before{
    content: '';
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    filter: blur(10px);
    z-index: -2;
}

.img-box::after{
    content: '';              
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    bottom: -1px;
    z-index: -1;
}

.img-box::before, .img-box::after{
    background-image: linear-gradient(45deg, #ff0000, #111, #0000ff);
    opacity: 0.7;
    transition: opacity ease-out 150ms;
}

.main-box:hover .img-box::after {
    opacity: 1;
}

<div class="main-box">
   <div class="img-box"><img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="keyboard"></div>
</div>

Не совсем ясно на картинке, но в браузере все стороны фонового изображения на 1px больше, кроме левой стороны, где на 2px больше.

ВЫХОД: Толстая линия слева

Answer 1

Это похоже на сглаживание. Я полагаю, у вас либо в вашем браузере установлен либо уровень масштабирования вашей ОС, чем 100%.

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

Для Чтобы обойти это, вы можете использовать свойство translate, которое должно позволять корректное сглаживание (оно будет размытым, но того же размера).

*, *::before, *::after{ box-sizing: border-box; }

body {
    display: flex;
    flex-flow: column wrap;
    justify-content: center;
    align-items: center;
    background-color: #111;
}

img {
    max-width: 300px;
    display: block;
    padding: 4px;
}

.main-box {
    position: relative;
}

.img-box {
    padding: 0;
    margin: 0;
    background-color: #000;
}

.img-box::before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc( 100% + 2px );
    height: calc( 100% + 2px );
    transform: translate(-1px,-1px);
    filter: blur(10px);
    z-index: -2;
}

.img-box::after{
    content: '';              
    position: absolute;
    top: 0px;
    left: 0px;
    width: calc( 100% + 2px );
    height: calc( 100% + 2px );
    transform: translate(-1px,-1px);
    z-index: -1;
}

.img-box::before, .img-box::after{
    background-image: linear-gradient(45deg, #ff0000, #111, #0000ff);
    opacity: 0.7;
    transition: opacity ease-out 150ms;
}

.main-box:hover .img-box::after {
    opacity: 1;
}

<div class="main-box">
   <div class="img-box"><img src="https://upload.wikimedia.org/wikipedia/commons/4/47/PNG_transparency_demonstration_1.png" alt="keyboard"></div>
</div>