Предотвращение размытого рендеринга с помощью transform: scale

я масштабирую div С свойством transform, но я хочу сохранить его детей (которые имеют 1px ширина или высота) тот же размер. Я сравнил их по .5, с ожидаемым результатом, что элемент 1px масштабируется на 2, а затем .5, должны в конечном итоге обратно в 1px, но они оказываются размытыми 2px.

вот поле перед его масштабирование:

.container {
    width: 200px;
    height: 200px;
    margin: 100px;
    background-color: #EEE;
    position: absolute;
}

.outline {
    position: absolute;
    background: #1899ef;
    z-index: 999999;
    opacity: 1 !important;
}

.outlineBottom, .outlineTop {
  width: 100%;
  height: 1px;
}

.outlineLeft, .outlineRight {
    height: 100%;
    width: 1px;
}

.outlineRight {
    right: 0px;
}

.outlineBottom {
    bottom: 0px;
}
<div class="container">
    <div class="outline outlineTop"></div>
    <div class="outline outlineRight"></div>
    <div class="outline outlineBottom"></div>
    <div class="outline outlineLeft"></div>
</div>

как вы можете видеть, элементы по краям ясны, темны 1px синий. Вот как выглядит коробка после масштабирование, хотя:

.container {
    width: 200px;
    height: 200px;
    margin: 100px;
    background-color: #EEE;
    position: absolute;
    transform: scale(2);
}

.outline {
    position: absolute;
    background: #1899ef;
    z-index: 999999;
    opacity: 1 !important;
    transform: scale(.5);
}

.outlineBottom, .outlineTop {
  width: 100%;
  height: 1px;
  transform: scale(1,.5);
}

.outlineLeft, .outlineRight {
    height: 100%;
    width: 1px;
    transform: scale(.5,1);
}

.outlineRight {
    right: 0px;
}

.outlineBottom {
    bottom: 0px;
}
<div class="container">
    <div class="outline outlineTop"></div>
    <div class="outline outlineRight"></div>
    <div class="outline outlineBottom"></div>
    <div class="outline outlineLeft"></div>
</div>

и вот пост-масштабируемая визуализация из Chrome 41.0.2272.89 Mac, который я запускаю.

добавлять transform-3d(0, 0, 0) похоже, не помогло. А решение был найден с помощью zoom свойства, но поскольку zoom не очень хорошо поддерживается, я бы хотел избегать этого. Добавление filter: blur(0px); похоже, тоже никакого эффекта.

он был положено в чат что, возможно, дети сначала масштабируется до .5 а затем удвоился в размере, в результате чего они будут уменьшены до .5px и затем обратно оттуда. Есть ли способ обеспечить порядок, в котором они отображаются, заставляет их сначала масштабироваться до 2px а потом наполовину? Вопреки здравому смыслу, я попытался!--45-->форсирование порядка рендеринга с помощью JS, но неудивительно, что это не имело никакого эффекта (хотя, что интересно, нижний элемент сохранил свой первоначальный цвет).

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

6

1 ответов

это связано с дефолтом transform-origin на масштабных элементов. Значение по умолчанию 50% 50% для любого преобразуемого элемента, но это имеет проблемы при масштабировании значений 1px, поскольку он должен центрировать scale на половине пикселя и рендеринга элементов имеет проблемы отсюда. Вы можете видеть, как он работает здесь с transform-origin переехал в соответствующие крайности для каждого элемента.

немного игры показывает, что это же размытие происходит на масштабированных элементах для любых размер, в котором масштабирование приводит к делению пикселя пополам.

body {
    padding: 1em;
}

.container {
    width: 200px;
    height: 200px;
    margin: 100px;
    background-color: #EEE;
    position: absolute;
    transform: scale(2);
}

.outline {
    position: absolute;
    background: #1899ef;
    z-index: 999999;
    opacity: 1 !important;
}

.outlineBottom, .outlineTop {
    width: 100%;
    height: 1px;
    transform: scale(1, 0.5);
}

.outlineBottom {
    bottom: 0;
    transform-origin: 0 100%;
}

.outlineTop {
    transform-origin: 0 0;
}

.outlineLeft, .outlineRight {
    height: 100%;
    width: 1px;
    transform: scale(.5,1);
}

.outlineRight {
    right: 0px;
    transform-origin: 100% 0;
}

.outlineLeft {
    left: 0px;
    transform-origin: 0 0;
}
<div class="container">
    <div class="outline outlineTop"></div>
    <div class="outline outlineRight"></div>
    <div class="outline outlineBottom"></div>
    <div class="outline outlineLeft"></div>
</div>
8