Размытая/искаженная текстовая пост-анимация на основе Webkit через translate3d

Ответ 1

Как упоминал ранее @Robert, иногда добавление фона помогает, но не всегда.

Итак, на примере Дмитрий добавил, что не единственное, что вы должны сделать: кроме фона, вы должны сказать браузеру явно использовать правильное сглаживание, поэтому есть пример с фиксированным Дмитрием: http://jsfiddle.net/PtDVF/1/

Вам нужно добавить эти стили вокруг (или для) блоков, где вам нужно исправить сглаживание:

background: #FFF; /* Or the actual color of your background/applied image */
-webkit-font-smoothing: subpixel-antialiased;

Ответ 2

Никто из них, похоже, не работал у меня, но я нашел немного грязное решение, которое, казалось, делало трюк:

top: 49.9%;
left: 49.9%;
-webkit-transform: translate(-50.1%, -50.1%);
transform: translate(-50.1%, -50.1%);

Ответ 3

У меня была точно такая же проблема, описанная в посте Кена Авила: CSS: transform: translate (-50%, -50%) делает текст размытым

Проблема, конечно, заключалась в том, что я использовал transform: translate (-50%, -50%), из-за чего мое центрированное содержимое стало размытым, но только в сафари на osx.

Размыто не только текст, но и весь контент, включая изображения. Я прочитал: http://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/, что "размытость" связана с тем, что элемент отображается на нецелой границе.

Я также обнаружил, что я могу избежать использования transform translate в горизонтальной части моего центрирования из этого поста: https://coderwall.com/p/quutdq/how-to-really-center-an-html-element-via-css -position-absolute-fixed -The Единственным минусом было то, что мне пришлось ввести обертку.

Я обнаружил, что использование transform: translateY (-50%) не создает "размывания", возможно, потому, что мой элемент имеет заданную высоту и, следовательно, не заканчивается рендерингом на нецелой границе.

Поэтому мое решение закончилось так:

.wrapper {
  position: fixed;
  left: 50%;
  top: 50%;
}
.centered {
  position: relative;
  left: -50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

<div class="wrapper">
  <div class="centered">
    Content
  </div>
</div>

Ответ 4

Я исправил эту проблему, добавив стиль translate3d к элементу до появления какой-либо анимации.

-webkit-transform: translate3d(0,0,0); 

Ответ 5

Элементы, которые вы переводите, должны делиться на два с четными числами.

Мне важно, что любой элемент, который вы пытаетесь переложить пополам, делится на два по ширине и высоте. Очень похоже на отзывчивые изображения, когда вещи могут перемещаться на 50% без разделения пикселей.

A div с шириной: 503 пикселей и высотой 500 пикселей приведет к размытию, независимо от того, как вы его перемещаете, или по количеству при использовании translateX или Y. Используя преобразование, он использует графический ускоритель графического процессора, который должен четкие, гладкие края. Также может быть хорошей идеей установить размер окна: border-box; для обеспечения расчетной ширины включают в себя заполнение и границы.

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

Ответ 6

Смотрите WebKit: размытый текст с помощью css scale + translate3d для решения. Это отлично работает, вам нужно много настраивать.

Ответ 7

Это лучшее решение translateX(calc(-50% + 0.5px))

Ответ 8

Отъезд http://dropshado.ws/post/6142339613/resolving-anti-aliasing-on-webkit-hardware-accelerated

Ответ 9

Возможно самое простое решение:

transform: translate(-50%, -50%) scale(2); 
zoom:.5;

Масштаб и масштабирование обеспечивают округление значений пикселей до полных чисел

Ответ 10

Ни один из этих ответов не работал у меня, но использовал

display: inline-table;

сделал трюк

Ответ 11

Использование zoom решило это для меня.

Я только добавил zoom: 1.04;

Ответ 12

Я надеюсь, что речь идет о центрировании объекта в точном центре экрана. Размытие происходит с помощью преобразования: translate (-50%, -50%);

так вместо того, чтобы делать

position: absolute;
margin:0;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);

Я попытался внедрить стиль в элемент, используя JavaScript. (React.js)

const node = ReactDOM.findDOMNode(this);
var width = node.offsetWidth;
var height = node.offsetHeight;
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;

style={
    left : (windowWidth/2) - (this.state.width/2) + 'px',
    right:  (windowWidth/2) - (this.state.width/2) + 'px',
    top: (windowHeight/2) - (this.state.height/2) + 'px',
    bottom: (windowHeight/2) - (this.state.height/2) + 'px'
}

внедрить стиль в элемент с помощью стиля javascript

Например.

export default class Dialog extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            width: '0px',
            height: '0px'
        };
    }

    setWidthhandHeight(node){
        if (this.state.width !== node.offsetWidth) {
            this.setState({
                width: node.offsetWidth,
                height: node.offsetHeight
            });
        }
    }

    componentDidMount() {
        this.setWidthhandHeight(node);
    }

    render() {
        const windowWidth = window.innerWidth;
        const windowHeight = window.innerHeight;
        return (
            <dialog className={this.props.className + " dialog"}
                    style={{
                        left : (windowWidth/2) - (this.state.width/2) + 'px',
                        right:  (windowWidth/2) - (this.state.width/2) + 'px',
                        top: (windowHeight/2) - (this.state.height/2) + 'px',
                        bottom: (windowHeight/2) - (this.state.height/2) + 'px'
                    }}>
                {this.props.title ? (
                    <header><span>{this.props.title}</span></header>
                    )
                    : null
                }
                {this.props.children}
            </dialog>
        );
    }
}

Ответ 13

.row{
        height: 100vh;
        background-color:black;
      }
      .align-center{
        left:50%;
        top:50%;
        background-color:green;
      }
      
      .translate3d{
        transform: translate3d(-50%,-50%,0);
      }
      .translateXY{
        transform: translateX(-50%) translateY(-50%);
      }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
      <div class="col">
        <h1 class="text-center position-absolute align-center text-white translate3d font-weight-bold">BLURRED</h1>
      </div>
      <div class="col">
        <h1 class=" text-center position-absolute align-center text-white font-weight-bold translateXY  ">CLEAR</h1>
      </div>

Ответ 14

Уменьшите вертикальное поле (margin-top или margin-bottom) или высоту любого элемента в контейнере, к которому применяется свойство transform translate, всего на 1 пиксель.

Ответ 15

@kizu Эти ответы и предложения не помогают. Для вашего jsfiddle вам нужно добавить

-webkit-perspective-origin: 50% 50%; -webkit-перспектива: 1400px;

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

Но в любом случае добавление тех, которые активируют изменение оси z, вызывает размытие кнопки в вашем примере.

Я тоже хотел бы найти решение этого вопроса, боюсь, что его нет.

Ответ 16

Для альтернативного решения попробуйте:

-webkit-text-stroke: 0.35px

Ответ 17

Просто это было исправлено простым трюком, который я не знаю. Здесь вы можете увидеть разные.

Изначально я стилизовал элемент следующим образом:

top: 50%;
left: 50%;
transform: translate(-50%, -50%);

Что приводит к размытому тексту... После случайного пробного периода я поместил стиль в стиль класса и заставил процессор CSS взять этот стиль вместо стиля элемента (поскольку я использую компоненты React, стили, заданные React, станут стилями элементов)

Это то, что я сделал.

.class-name {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

Я действительно хочу знать, почему этот стиль от стиля элемента до стиля класса исправит это. Любая идея?

Ответ 18

В этих типах проблем я использую will-change, обычно он решает проблемы масштабирования или ошибки округления, такие как, например, просмотр белой линии, разделяющей элементы размером 1px.

will-change: transform;

Узнайте больше здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

Ответ 19

Решение, найденное в моем случае, заключалось в установке значения height первого дочернего элемента

Ответ 20

Использование документа HTML5 решило проблему для меня.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">