2

CSS トランジションに問題があります。ユーザー プロフィールのデザインを作成しました。ユーザーがプロフィール写真にカーソルを合わせると、境界線の幅が 3px から 10px に変わります。これにより、移行時にサイト全体が揺れます。

ここで揺れが見られます！

CSS

#timeline-user > .timeline-user-border{
    border: 3px solid #2cbbee;
    padding: 7px;
    border-radius: 35px;
    width: 50px;
    height: 50px;
    -webkit-transition:all 0.2s ease;
}

#timeline-user > .timeline-user-border:hover{
    border: 10px solid #2cbbee;
    padding: 0;
    -webkit-transition:all 0.2s ease;
}
4

3 に答える 3

2

Smashing Magazine のこの記事によると、次のようになります。

複数のプロパティの移行は、Firefox と Webkit では同期されません。この例では、パディングが増加するのと同じ量だけ境界線を小さくすると (逆も同様)、次のコンテンツが少し揺れることがわかります。IE 10 と Opera はこれを正しく行います。

実際、変更した場合：

-webkit-transition:all 0.2s ease;

に：

-webkit-transition:width 0.2s ease;

要素が揺れなくなったことに気付くでしょう。

ただし、解決策はわかりません。担当者がいれば、これをコメントとして投稿したでしょう。

于 2013-09-20T16:47:56.160 に答える