javascript - translate3dを介したアニメーション後のWebkitベースのぼやけた/歪んだテキスト

Question

この問題は、iPhoneを含むすべてのWebKitベースのブラウザに影響するようです。

最初にいくつかの背景。私が取り組んでいるサイトは、JavaScriptベースの「スライダー」アニメーションを使用しています。

私は-webkit-transform: translate3d実際のアニメーションを「パワー」するために使用しています。この方法を使用する場合、JavaScriptベースの方法とは対照的に、コンテンツがアニメーション化されると、テキストはすべてぼやけます。これはiPhoneで特に顕著です。

私が見たいくつかの回避策は、私が行った相対的な位置付けを削除し、私も行ったのルールを追加すること-webkit-font-smoothing: antialiasedでした。どちらの変更もわずかな違いはありませんでした。

ぼやけたテキストなしでこれを適切に機能させる唯一の方法は、アニメーションに通常のJavaScriptを使用し、translate3d完全にバイパスすることでした。WebKit対応デバイスでのパフォーマンスがはるかにtranslate3d速いため、使用したいと思いますが、私の人生では、なぜそれがテキストにそれほど悪い影響を与えているのか理解できません。

任意の提案や解決策をいただければ幸いです。

score 24 · Accepted Answer

これらのどれも私のために働いていないようですが、私はトリックをするように思われる少し汚い解決策を見つけました：

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

score 21 · Accepted Answer

@Robertが前述したように、背景を追加すると役立つ場合がありますが、常にそうとは限りません。

したがって、Dmitryが追加した例では、それだけが実行する必要はありません。バックグラウンドを除いて、適切なアンチエイリアスを明示的に使用するようにブラウザに指示する必要があるため、Dmitryの固定例があります：http：//jsfiddle.net / PtDVF / 1 /

アンチエイリアシングを修正する必要があるブロックの周囲（またはブロック）にこれらのスタイルを追加する必要があります。

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

score 20 · Accepted Answer

Ken Avilaの投稿で説明されているのとまったく同じ問題がありました：CSS：transform：translate（-50％、-50％）はテキストをぼやけさせます

問題はもちろん、私が変換を使用したことでした：translate（-50％、-50％）は、中央のコンテンツをぼやけさせましたが、osxのサファリでのみでした。

ぼやけるのはテキストだけでなく、画像を含むコンテンツ全体です。http://keithclark.co.uk/articles/gpu-text-rendering-in-webkit/で読んだところによると、「ぼやけ」は、要素が非整数の境界でレンダリングされるためです。

また、この投稿から、センタリングの水平部分で変換変換を使用しないようにすることができることも発見しました：https ://coderwall.com/p/quutdq/how-to-really-center-an-html-element-via-css -position-absolute-fixed-唯一のマイナス点は、ラッパーを導入しなければならなかったことです。

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>

score 18 · Accepted Answer

翻訳する要素は、偶数で2で割り切れる必要があります。

半分にシフトしようとしている要素は、幅と高さの両方で2で割り切れることが重要です。レスポンシブ画像と非常によく似ており、ピクセルを分割せずに物事を50％移動できます。

幅が503px、高さが500pxのdivは、移動方法やtranslateXまたはYを使用する場合の量に関係なく、ぼやけを引き起こします。変換を使用すると、GPUグラフィックアクセラレータが使用され、非常に鮮明で滑らかになります。エッジ。ボックスサイズを設定することも良い考えかもしれません：border-box; 計算された幅にパディングとボーダーが含まれるようにします。

パーセンテージ幅を使用する場合は注意してください。それが画面サイズに関連している場合、他の画面ピクセル幅がこのぼやけを引き起こします。

score 16 · Accepted Answer

translate3dアニメーションが発生する前に要素にスタイルを追加することで、この問題を修正しました。

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

score 7 · Accepted Answer

7

これが最善の解決策です translateX(calc(-50% + 0.5px))

于 2017-09-08T12:58:57.407 に答える

score 3 · Accepted Answer

おそらく最も簡単な解決策：

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

スケールアンドズームは、ピクセル値を完全な数値に丸める処理を行います

score 2 · Accepted Answer

Neil Taylorのソリューションは最高でしたが、それでも改善できます。

transform: translateX(-50%) translateX(.5px)

このように、2つの利点があります。

IE11のようなくだらないブラウザで動作します（翻訳内の計算をサポートしていません）
ブラウザが評価するたびではなく、解析時にのみ計算します。

score 1 · Accepted Answer

これらの答えはどれも私にはうまくいきませんでしたが、

display: inline-table;

トリックをしました

score 0 · Accepted Answer

0

使用zoomして私のためにそれを解決しました。

追加しましたzoom: 1.04;

于 2018-06-04T15:47:20.867 に答える

score 0 · Accepted Answer

これが、オブジェクトを画面の正確な中央に配置することだと思います。ぼかしは変換で発生します：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>
        );
    }
}

score 0 · Accepted Answer

変換変換プロパティが適用されているコンテナ内の要素の垂直マージン（margin-topまたはmargin-bottom）または高さをわずか1ピクセル減らします。

score 0 · Accepted Answer

0

Chromeのズームを100％にリセットするとうまくいきました。

于 2019-11-12T12:02:31.583 に答える

score 0 · Accepted Answer

パーセンテージをアニメーションに使用する場合でも、パフォーマンスを考慮すれば許容できますがtranslate、アニメーションに使用しない場合は、テキストが常にぼやけるため、パーセンテージが異なります。

0.5pxパーセンテージを使用すると、のような小数になる可能性があり、テキストがぼやけた理由です。私の実験では、を使用するとテキストが非常にぼやけてしまうため、許容範囲内である間translate(0.5px, 0.5px)は小数を避ける必要があります。0.3px <=> 0.7px0.2px and 0.8px

私の提案は、JavaScriptを使用して、要素をアニメーション化するためにパーセンテージを丸みを帯びたピクセルに変換し、translate要素の配置に使用されている場合はパーセンテージの代わりにピクセルを使用することです。

もう1つの方法は、を使用leftして初期位置をパーセンテージでtop設定し、次にターゲット位置にピクセルを使用して、でのみアニメーション化することです。transform: translate()transformtransition-property: transform;

score -1 · Accepted Answer

-1

別の解決策については、次を試してください。

-webkit-text-stroke: 0.35px

于 2012-11-11T07:07:20.327 に答える

score -1 · Accepted Answer

私の場合に見つかった解決策heightは、最初の子要素の値を設定することでした

score -2 · Accepted Answer

@kizuこれらの回答と提案は役に立ちません。jsfiddleには、追加する必要があります

-webkit-perspective-origin：50％50％; -webkit-パースペクティブ：1400px;

translate3dを使用する要素の親要素に移動します。それ以外の場合、z軸を移動しても実際には何も行われません。この場合、クリックしたボタンに適用しているので、コンテンツに適用するつもりだったと思います。

ただし、とにかく、これらを追加してz軸の変更をアクティブにすると、例のボタンがぼやけます。

私もこれに対する解決策を見つけたいと思います、私はそれがないのではないかと心配しています。

score -2 · Accepted Answer

私はwill-changeこれらのタイプの問題に使用します。通常、スケーリングの問題や丸め誤差を解決します。たとえば、要素を区切る1pxの白い線が表示されます。

will-change: transform;

詳細はこちら： https ：//developer.mozilla.org/en-US/docs/Web/CSS/will-change

score -8 · Accepted Answer

HTML5 doctypeを使用すると、問題が解決しました。

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

javascript - translate3dを介したアニメーション後のWebkitベースのぼやけた/歪んだテキスト

19 に答える 19

Related

Reference