I am making a website with a lot of absolutely positioned elements. I have them contained in a "page wrap" that is centered on the page. It is relatively positioned so the contained elements are laid out relative to it. Certain elements on the page are anchors to other pages and, on :hover, these elements transition to another state that makes them appear to be lifted off the page using a scale transformation and an increased box shadow.
However, when I hover over one such element, all those that follow it in the markup exhibit strange behavior such as slightly shifting position during the transition. This issue does not occur if they are not contained in the page wrap or if the page wrap is no longer set as relatively positioned (basically the same thing from a layout perspective in this case).
It seems to me as though the fact that the page wrap is centering these elements and then they are laid out relative to it is somehow affecting the rendering of the transitions, but I'm completely stuck. I've tried everything I can think of and am now reaching out for some help. Also I should say that I've only tested this on Webkit browsers so the issue may not occur on other browsers.
Here's some stripped down code:
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); } 
