1

絶対に配置された要素がたくさんあるウェブサイトを作っています。ページの中央にある「ページラップ」にそれらを含めています。含まれる要素がそれに対して配置されるように、それは比較的配置されています。ページ上の特定の要素は他のページへのアンカーであり、：hoverで、これらの要素は別の状態に遷移し、スケール変換とボックスシャドウの増加を使用してページから持ち上げられたように見えます。

ただし、そのような要素の1つにカーソルを合わせると、マークアップでそれに続くすべての要素が、遷移中に位置がわずかにシフトするなどの奇妙な動作を示します。この問題は、ページラップに含まれていない場合、またはページラップが相対位置に設定されていない場合（この場合、レイアウトの観点からは基本的に同じです）には発生しません。

ページの折り返しがこれらの要素を中央に配置し、それを基準にして配置されているという事実は、トランジションのレンダリングに何らかの影響を及ぼしているように見えますが、私は完全に立ち往生しています。私は考えられるすべてのことを試しましたが、今は助けを求めています。また、これはWebkitブラウザーでのみテストしたため、他のブラウザーでは問題が発生しない可能性があります。

いくつかの簡略化されたコードは次のとおりです。

HTML：

<body>
    <div id="page-wrap">

        <a class="card" href="text.html"><div class="vert"><div class="card-content">
            Here is<br/>some text
        </div></div></a>

        <a class="card" href="somemore.html"><div class="vert"><div class="card-content">
            Here is<br/>some more text
        </div></div></a>

        <a class="card" href="evenmore.html"><div class="vert"><div class="card-content">
            Here is<br/>even more text
        </div></div></a>

    </div>
</body>

CSS：

body {
    background: hsl(60, 80%, 90%);
}

#page-wrap {
    margin: 0 auto;
    position: relative;
    width: 800px;
}

.card {
    background: hsl(80, 0%, 97%);
    box-shadow: 0 1px 7px hsla(0,0%,0%,.2);
    display: table;
    height: 150px;
    margin: 0px;
    position: absolute;
    width: 300px;
    -webkit-transition: all 0.2s linear;
}

.vert {
    display: table-cell;
    margin 0px;
    padding: 0px;
    vertical-align: middle;
    width: 100%;
}

.card-content {
    font: 40px 'Annie Use Your Telescope', cursive;
    margin: 0px;
    text-align: center;
    width: 100%;
}

a.card {
    background: hsl(120, 90%, 35%);
    color: hsl(60, 80%, 90%);
    text-decoration: none;
    text-shadow: -2px 2px hsl(60, 80%, 35%);
    z-index: 3;
}

a:hover {
    box-shadow: 0 0 40px 15px hsla(0,0%,0%,.3);
    -webkit-transform: scale(1.2);
}
4

3 に答える 3

1

.cardに追加-webkit-backface-visibility: hidden;します。

すでにここで答えました。

于 2013-02-10T20:13:13.100 に答える
0

I copied your code "as-is" on a CodePen.

I can't see any problem with it.

于 2013-02-09T20:54:09.140 に答える
0

あなたが抱えていると思われる問題を再現することができませんでした。たぶんjsfiddle.netの例がいいでしょうか？

htmlとcssを使用する場合、divは互いに積み重ねられ、.cardposition: absolute;から削除されて作成されます。そこに問題は見られなかったので、元に戻してdivに値を追加してみました。唯一の問題は、後のすべてのdivが上にあり、.card：hoverに追加され、すべてが正常に機能しているように見えることでした。float:lefttop:left:z-index:999

jsfiddle.netリンクを投稿してみてください。もう一度見てみます。

于 2013-02-09T10:29:13.520 に答える