Черная граница или линия, появляющиеся по краям html Элементы, несмотря на границы в видеофайле [закрыто] ⇐ Html

[Anonymous]

Я встраиваю видео MP4 в адаптивную макет с использованием HTML/CSS. Видео выглядят чистыми в исходном файле, но тонкая черная линия появляется вдоль определенных ребра (спорадический вид, иногда также появляется в определенных положениях прокрутки) видео. Edge видео. Эта строка:

[*] Не существует в реальном видеофайле
[*] появляется и исчезает во время событий прокрутки
[*] только в некоторых размерах экрана (например. edge < /strong> (браузеры на основе хрома) < /li>
< /ul>
ожидаемое поведение: < /h3>

Видео должно полностью заполнить его контейнер < /li>
. Пример < /h3>
Вот упрощенная версия моей настройки: < /p>
html: < /p>

Код: Выделить всё

< /code>
css: < /p>
.video-wrapper {
overflow: hidden;
border-radius: 32px;
box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
border: 1px solid #c4c4c4;
}

.video-wrapper video {
width: 100%;
object-fit: cover;
}

Что я пробовал:

Добавление переполнения: скрыто к обертке и видео.
[*] Использование Transform: Scale (1.01), чтобы скрыть край (причины Blur)
[*] rupors (ruper blure)

Подталкивание слева: 1px (задача сдвигает, но вводит проблемы с выравниванием) src = "https://i.sstatic.net/wruiiawx.jpg"/>
Вопрос:
Что вызывает этот черный артефакт только во время прокрутки или при определенных решениях? Без краев артефактов, особенно в безграничных макетах?


Подробнее здесь: https://stackoverflow.com/questions/796 ... te-no-bord