Проблемы с наведением курсора Z-Index div в [windows] Webkit (Safari, Opera и т. д.)

Редактировать: это происходит ТОЛЬКО в Windows Webkit, не происходит на Mac

Я пытаюсь настроить сетку с ячейками фиксированного размера с фоновым изображением. При наведении курсора фоновое изображение и высота ячейки изменяются/увеличиваются и перекрывают строку под ней.

Я попробовал несколько способов реализовать эту идею и пришел к выводу, что таблица с z-индексом, примененным к строке, будет работать лучше всего.

Моя проблема, как следует из названия, заключается в том, что у меня это работает в IE/FF, но по какой-то причине webkit, похоже, не заботится о z-индексе в настройках строки.

Я должен отметить, что внутри каждой сетки находится плагин цикла jquery, который, я думаю, ни на что не влияет, но у меня также есть некоторые проблемы с приостановкой плагина цикла в webkit.

html таблицы и две строки

<div id="girlcontent">
     <table class="girltable" cellpadding="0" cellspacing="0">
         <tr>
            <td class="girlrow" valign="top">
            <div class="girlbox"> 
             <div class="girlplace" id="girlcycle"> 
                 <img src="img/girls/1a.jpg" alt="image" />
                    <img src="img/girls/1b.jpg" alt="image" />
                    <img src="img/girls/1c.jpg" alt="image" />
                </div>
                <div id="gctext">
                    <div class="girltext">Butters</div>
                    <div class="girltextsm">info</div>
                </div>
            </div>
            </td>
            <td class="girlrow" valign="top">
            <div class="girlbox"> 
             <div class="girlplace" id="girlcycle2"> 
                  <img src="img/girls/1g.jpg" alt="image" />
                  <img src="img/girls/1c.jpg" alt="image" />
                  <img src="img/girls/1d.jpg" alt="image" />
                </div>
                <div id="gctext2">
                    <div class="girltext">CandyCanes</div>
                    <div class="girltextsm">info</div>
                </div>
            </div>
            </td>
            <td class="girlrow" valign="top">
            <div class="girlbox"> 
             <div class="girlplace" id="girlcycle3"> 
                 <img src="img/girls/1e.jpg" alt="image" />
                    <img src="img/girls/1b.jpg" alt="image" />
                    <img src="img/girls/1f.jpg" alt="image" />
                </div>
                <div id="gctext3">
                    <div class="girltext">Tandy</div>
                    <div class="girltextsm">info</div>
                </div>
            </div>
            </td>
            <td class="girlrow" valign="top">
            <div class="girlbox"> 
             <div class="girlplace" id="girlcycle4"> 
                 <img src="img/girls/1b.jpg" alt="image" />
                    <img src="img/girls/1e.jpg" alt="image" />
                    <img src="img/girls/1g.jpg" alt="image" />
                </div>
              <div id="gctext4">
                    <div class="girltext">Dancer</div>
                    <div class="girltextsm">info</div>
                </div>
            </div>
            </td>
            </tr>
            <tr>
            <td class="girlrow2" valign="top">
            <div class="girlbox"> 
             <div class="girlplace" id="girlcycle5"> 
                 <img src="img/girls/1f.jpg" alt="image" />
                    <img src="img/girls/1e.jpg" alt="image" />
                    <img src="img/girls/1g.jpg" alt="image" />
                </div>
                <div id="gctext5">
                    <div class="girltext">Sam</div>
                    <div class="girltextsm">info</div>
                </div>
            </div>
            </td>
            <td class="girlrow2" valign="top">
            <div class="girlbox"> 
             <div class="girlplace" id="girlcycle6"> 
                 <img src="img/girls/1d.jpg" alt="image" />
                    <img src="img/girls/1e.jpg" alt="image" />
                    <img src="img/girls/1g.jpg" alt="image" />
                </div>
                <div id="gctext6">
                    <div class="girltext">Tina</div>
                    <div class="girltextsm">info</div>
                </div>
            </div>
            </td>
            <td class="girlrow2" valign="top">
            <div class="girlbox"> 
             <div class="girlplace" id="girlcycle7"> 
                 <img src="img/girls/1f.jpg" alt="image" />
                    <img src="img/girls/1d.jpg" alt="image" />
                    <img src="img/girls/1g.jpg" alt="image" />
                </div>
                <div id="gctext7">
                    <div class="girltext">Natalie</div>
                    <div class="girltextsm">info</div>
                </div>
            </div>
            </td>
            <td class="girlrow2" valign="top">
            <div class="girlbox"> 
             <div class="girlplace" id="girlcycle8"> 
                 <img src="img/girls/1b.jpg" alt="image" />
                    <img src="img/girls/1e.jpg" alt="image" />
                    <img src="img/girls/1g.jpg" alt="image" />
                </div>
                <div id="gctext8">
                    <div class="girltext">Lana</div>
                    <div class="girltextsm">info</div>
                </div>
            </div>
            </td>
            </tr>
       </table>
</div>

CSS для области контента/фона/и т. д.

#girlcontent {
width:860px;
background-color:#000;
}

#girlspace {
background-color:#000;
padding-bottom:35px;
width:860px;
}

.girlbox {
background-image:url(../img/girlsbacka.png);
background-repeat:no-repeat;
background-position:center;
height:264px;
width:194px;
margin:10px;
z-index:0;
position:absolute;
}

.girlbox:hover {
background-image:url(../img/girlsbackb.png);
background-repeat:no-repeat;
background-position:center;
height:325px;
width:194px;
}

.girltable {
width:860px;
position:relative;
z-index:0;
}

.girlrow {
height:264px;
z-index:3;
position:relative;
}


.girlrow2 {
 height:264px;
 z-index:2;
 position:relative;
}

Javascript для области, есть и другие, основанные на идентификаторах

$(document).ready(function() {
$('#girlcycle').cycle({
fx: 'fade',
delay:  -250
});
$('#girlcycle').cycle('pause');
$('#gctext').hide();
$('#girlcycle').hover(function() { 
    $('#girlcycle').cycle('resume', true);
    $('#gctext').show();
});
 $('#girlcycle').mouseleave(function() { 
    $('#girlcycle').cycle('pause');
    $('#gctext').hide();
});

Если у кого-нибудь есть идеи, почему это не работает в webkit, я был бы признателен за любую помощь, которую вы можете предложить!