Div с анимацией CSS за дисплеями, особенно в Chrome - PullRequest
Новая
       17

Div с анимацией CSS за дисплеями, особенно в Chrome

0 голосов
/ 04 декабря 2011

У меня проблема с тем, что форма отображается только в Chrome (только в Chrome, работает в FF и Safari).

По сути, форма находится сверху вращающегося элемента div с z-индексом: 2, а анимация позади имеет z-индекс: 1

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

Кто-нибудь знает, как это исправить?

Страница находится здесь: http://fatdogcs.com/rdv/index-test.html

Вот как это выглядит в Chrome: http://dl.dropbox.com/u/8974822/test.jpg

Css код для вращения колеса: 

#Wheel{
    background-image:url(../images/circle.png);

    -webkit-animation: rotateWheel 60s linear infinite;
    -moz-animation:    rotateWheel 60s linear infinite;
    -ms-animation:     rotateWheel 60s linear infinite;

    height:370px;
    width:370px;    
    position: absolute;
    top: 195px;
    left: 315px;
    z-index: 1; 
}

Код CSS для формы div: 

#Over18Form{
    width:  225px;
    margin: 0 auto;
    position:absolute;
    top: 300px;
    left: 387px;
    z-index: 2;
}

HTML-код: 

    <div id="Wheel"></div>
    <div id="Over18Form">
        <form>
            <div id="Over18"></div>
            <input type="radio" name="age" id="Yes" />
            <label for="Yes" style="margin-right:10px;">Yes</label>
            <input type="radio" name="age" id="No" />
            <label for="No">No</label>

            <div id="ChooseLanguage"></div>
            <input type="radio" name="language" id="English" />
            <label for="English" style="margin-right:10px;">English</label>
            <input type="radio" name="language" id="Chinese" />
            <label for="Chinese">中文</label>
            <div class="clear" style="margin-bottom:30px;"></div>
            <button type="submit">Enter</button> 
        </form>

1 Ответ

0 голосов
/ 24 марта 2012

Я попробовал несколько вещей, когда убрал -webkit-animation: rotateWheel 60s linear infinite;это выглядело хорошо.

Я бы предложил: 1) Используя JavaScript для вращения колеса, попробуйте этот плагин: http://ricostacruz.com/jquery.transit/ 2) Или просто используйте ваши собственные радио-кнопки через изображение как png-24

(У меня была похожая проблема при объединении border, divs и -webkit-border-raidus с различными анимациями z-index.)

...