Пост-анимация размытого / искаженного текста на основе Webkit через translate3d - PullRequest
Новая
       62

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

49 голосов
/ 20 июня 2011

Эта проблема затрагивает все браузеры на основе WebKit, включая iPhone.

Сначала немного предыстории. Сайт, над которым я работаю, использует анимацию слайдера на основе JavaScript.

Я использую -webkit-transform: translate3d для «питания» реальной анимации. При использовании этого метода, в отличие от метода на основе JavaScript, текст становится размытым после анимации содержимого. Это особенно заметно на iPhone.

Несколько обходных путей, которые я видел, состояли в том, чтобы удалить относительное позиционирование, которое я сделал, и добавить правило для -webkit-font-smoothing: antialiased, которое я также сделал. Ни одно из изменений не имело ни малейшего значения.

Единственный способ , который я мог бы сделать правильно, без размытого текста, - это использовать обычный JavaScript для анимации и вообще обойти translate3d. Я бы предпочел использовать translate3d, потому что он работает на намного быстрее на устройствах с поддержкой WebKit, но я не могу понять, почему он так плохо влияет на текст.

Любые предложения или решения будут с благодарностью.

Ответы [ 17 ]

0 голосов
/ 30 сентября 2018 

.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>

У меня также была такая же проблема, когда я использовал translateZ, она была решена, когда я использовал translateX и translateY вместе, а не translateZ, как это 

transform: translateX(-50%) translateY(-50%);

работает и с прозрачным фоном, не знаю почему, но у меня сработало как минимум

0 голосов
/ 24 июля 2018

Надеюсь, речь идет о центрировании объекта точно по центру экрана.Размытие происходит с преобразованием: 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>
        );
    }
}
0 голосов
/ 04 июня 2018

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

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

0 голосов
/ 25 января 2018

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

will-change: transform;

Подробнее здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/will-change

0 голосов
/ 14 марта 2012

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

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

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

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

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

0 голосов
/ 11 ноября 2012

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

-webkit-text-stroke: 0.35px
0 голосов
/ 08 августа 2013

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

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
Страница:
...