web-dev-qa-db-ja.com

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

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

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

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

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

onlyぼやけたテキストなしでこれを適切に動作させる方法は、アニメーションに通常のJavaScriptを使用し、translate3dを完全にバイパスすることでした。 WebKit対応デバイスでmuchより高速に実行されるため、translate3dを使用したいと思いますが、私の人生では、なぜテキストがこのような粗悪な方法で影響を受けているのかわかりません。

提案や解決策は大歓迎です。

javascriptcsstextwebkitblurry
49
Mike

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

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

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

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

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

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

Ken Avilaの投稿で説明されているのとまったく同じ問題がありました： CSS：transform：translate（-50％、-50％）makes texts blurry

問題はもちろん、transform（-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>
17
Njaal Gjerde

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

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

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

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

幅が503px、高さが500pxのdivは、どの方向に移動しても、translateXまたはYを使用するときにどれだけぼやけても発生します。エッジ。また、ボックスのサイズを設定することをお勧めします：border-box;計算された幅にパディングとボーダーが含まれるようにするため。

パーセント幅を使用する場合は注意してください。画面サイズに相対的な場合、他の画面ピクセル幅がこのブラーを引き起こします。

12
factorypolaris

これが最適なソリューションですtranslateX(calc(-50% + 0.5px))

4
Neil Taylor

おそらく最も簡単なソリューション：

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

拡大縮小は、ピクセル値を完全な数に丸める処理を行います

3
Šarūnas Sirotka

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

display: inline-table;

トリックをしました

1
user3251328

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

Transform translateプロパティが適用されているコンテナ内の要素の垂直方向のマージン（margin-topまたはmargin-bottom）または高さを1ピクセル分だけ減らします。

0
TanmayD

zoomを使用して解決しました。

zoom: 1.04;を追加しました

0
Black