Странное неокрашенное пространство, вызванное вращающимся div ⇐ Html

[Anonymous]

В настоящее время у меня есть какая-то странная проблема, вызванная вращением Div.
См. Ниже, или: https://codepen.io/mark-boute/pen/wbvxrex
На некоторых (не все!) Установки Zoom, белая линия появляется между черными ящиками. Удаление преобразования: вращение (180deg); Line CSS, по -видимому, удаляет это поведение. Поведение одинаково для браузеров на основе хрома и Firefox. (Я специально хочу поведение вращения вместо масштабирования (-1) для эффекта моих SVG!). Фактический фон DOV не черный, а SVG с использованием фонового изображения: url ('my.svg'); .
Класс. Class = "Snippet-Code">

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

.background {
background-color: black;
height: 100px;
width: 100%;
backface-visibility: hidden;
}

.flipped {
transform: rotate(180deg);
}

.content {
/*   ugly fix, not helping me understand what is happening */
/*   outline-offset:-1px; */
/*   outline: 2px solid #1ab2e6; */
}< /code>

скриншот того, что происходит в моем проекте:


Подробнее здесь: https://stackoverflow.com/questions/796 ... tating-div