Проблемы в Firefox 17.0.1 с градиентом при повороте

Illirgway · №1

Здравствуйте. Вот кусок кода страницы, который правильно работает в старых версиях Firefox и других современных браузерах, но неправильно - в Firefox 17.0.1 (Win7):

Выделить код

Код:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="ru">
<head>
    <style>

        * { margin: 0; padding: 0; }

        /*Button*/
        .help_button {
            position: fixed;
            float: none;

            top: 50%;

            color:#FFF;
            font-size: 16px;

            left: -10px;
            -o-transform: rotate(-90deg) translate(25px,-105px);
            -webkit-transform: rotate(-90deg) translate(25px,-105px);
            -moz-transform: rotate(-90deg) translate(25px,-105px);
            /*-ms-transform: rotate(-90deg) translate(25px,-105px);    /* IE9+ */
            transform: rotate(-90deg) translate(25px,-105px);

            text-align: center;

            width: 250px;
            height: 32px;
            padding: 20px 0 0 0;
    
            background:#003AD9;
            background-image: linear-gradient(top, #003AD9 5%, #003AD9 90%, #FFFFFF 100%);
            background-image: -o-linear-gradient(top, #003AD9 5%, #003AD9 90%, #FFFFFF 100%);
            background-image: -moz-linear-gradient(top, #003AD9 5%, #003AD9 90%, #FFFFFF 100%);
            background-image: -webkit-linear-gradient(top, #003AD9 5%, #003AD9 90%, #FFFFFF 100%);
            background-image: -ms-linear-gradient(top, #003AD9 5%, #003AD9 90%, #FFFFFF 100%);

            background-image: -webkit-gradient(
                linear,
                left top,
                left bottom,
                color-stop(0.05, #003AD9),
                color-stop(0.90, #003AD9),
                color-stop(1, #FFFFFF)
            );

            cursor: pointer;

            border-radius:0px 0px 20px 20px;
            border:1px #003ad9 solid;
        }

        .help_button:hover { left: -3px; }

    </style>

</head>

<body>
    <div class="help_button">Обратиться в техподдержку</div>
</body>
</html>

Так должно быть (и так и есть в FF 10.0.5 на WinXP и в других браузерах и на WinXP и на Win7)

Так получается у нового Firefox 17.0.1 на Win7:

Проблема с градиентом после поворота - вместо того чтобы встать справа как и должно было после поворота на -90%, или хотя бы остаться внизу (если бы поворот на него не повлиял), он по непонятным причинам встал сверху

Unghost · №2

Тема перенесена из форума «Firefox» в форум «Разработка».

Unghost · №3

Что-нибудь пишется в Консоли ошибок Firefox 17?

Sid · №4

Неправильный поворот градиента — это баг, который исправлен в Firefox 18.
Bug 809478 - CSS Gradients aren't rotated correctly when used with CSS transforms rotate(90deg) and rotate(270deg)

Также обрати внимание, что Firefox, начиная с версии 16, поддерживает linear-gradient без префикса, и синтаксис там другой по стандарту, а у тебя неправильно.

Illirgway · №5

Благодарю

Полезная информация

№106-01-2013 17:15:51

Проблемы в Firefox 17.0.1 с градиентом при повороте

Код:

№206-01-2013 18:06:05

Re: Проблемы в Firefox 17.0.1 с градиентом при повороте

№306-01-2013 18:07:45

Re: Проблемы в Firefox 17.0.1 с градиентом при повороте

№406-01-2013 18:20:08

Re: Проблемы в Firefox 17.0.1 с градиентом при повороте

№506-01-2013 20:20:22

Re: Проблемы в Firefox 17.0.1 с градиентом при повороте

Board footer