絶対に配置された要素がたくさんあるウェブサイトを作っています。ページの中央にある「ページラップ」にそれらを含めています。含まれる要素がそれに対して配置されるように、それは比較的配置されています。ページ上の特定の要素は他のページへのアンカーであり、：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);
}