0

css3@-webkit-keyframeアニメーションを使用してフェードインおよび移動する4つの絶対位置のdivがあります。私が気付いたのは、@font-face私が使用しているセリフとディセンダーの一部が、自動的に計算されたdivのエッジでトリミングされることです。（私はを使用してtext-align: leftいるので、divの左端と下端でのみこれに気づきます。

divの固定サイズを定義し、に変更することでこの問題を回避できますがtext-align: center、これを修正するより良い方法があるかどうか知りたいので、テキストが変更された場合にdivのサイズを変更する必要はありません。または、を変更する必要がある場合font-size。

編集：ここに私がしていることのアイデアを与えるためのいくつかのコードがあります

div#text_2
{ 
    position: absolute;
    top: 288px;
    left: 100px;
    font-size: 65px;
    color: #C0DB81;
    font-family: 'TFArrow-Medium'; /* This is defined in another css file */
    -webkit-animation-delay: 0s;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.35, 1.0);
    -webkit-transform: translateZ(0);
    -webkit-animation-duration: 4s;
    -webkit-animation-name: text_fade_in2;
}

@-webkit-keyframes text_fade_in2
{
    0%      { opacity: 0; }
    25%     { opacity: 0; }
    50%     { opacity: 1; }
    100%    { opacity: 1; }
}

これにより、トリミングの問題が修正されます。

div#text_2
{ 
    position: absolute;
    top: 288px;
    left: 100px;
    font-size: 65px;
    color: #C0DB81;
    font-family: 'TFArrow-Medium'; /* This is defined in another css file */
    -webkit-animation-delay: 0s;
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.35, 1.0);
    -webkit-transform: translateZ(0);
    -webkit-animation-duration: 4s;
    -webkit-animation-name: text_fade_in2;
    height: 65; /* 60px is the auto-calculated height in Safari */
}
4

1 に答える 1

0

何人かの WebKit 開発者と話をしたところ、新しい WebKit バグが見つかりました。彼らは Web レンダリングの用語で話していました (私はまったく無知です) が、これが彼らが開いた問題だと思います:

当面の回避策は、この CSS を Web ページに追加することです (警告: これにより、大量のテキストのレンダリング時間が大幅に増加します)。

* { text-rendering: optimizelegibility; }
于 2013-06-24T19:57:06.303 に答える