Opera и FireFox не могут прочитать значение поворота CSS3

Я не могу прочитать значение поворота преобразования CSS3 в:

  • Opera 9.62
  • Opera 10.51
  • FireFox 4.01

Прекрасно работает в IE, Chrome и Safari, но не в трех перечисленных выше. Вот источник:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <style>
        div {
            -webkit-transform:     rotate(-5deg);
            -moz-transform:        rotate(-5deg);
            -o-transform:        rotate(-5deg);
            -ms-transform:        rotate(-5deg);
            transform:            rotate(-5deg);
            border: 1px solid black;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {

            // tries to read the CSS rotate data
            // starts by reading -webkit-transform, if it
            // fails then read -moz-transform and so on
            var getRotation = function ($e) {
                var value = $e.css('-webkit-transform');
                if (value === undefined) {
                    value = $e.css('-moz-transform');
                    if (value === undefined) {
                        value = $e.css('-o-transform');
                        if (value === undefined) {
                            value = $e.css('-ms-transform');
                            if (value === undefined) {
                                value = $e.css('transform');
                            }
                        }
                    }
                }
                return value === undefined? '' : value;
            };

            var returnValue = getRotation($("div"));
            alert(returnValue === ''?
                "Failed to get rotation info!" : 
                "Got it: " + returnValue);
        });
    </script>
</head>
<body>
    <div>rotated</div>
</body>
</html>

живой пример на jsfiddle здесь

Итак, я хочу использовать jquery css() для чтения угла поворота, но, как ни странно, Opera 10.51 и FF 4.01 (и ниже) не могут его прочитать, хотя div отображается правильно с эффектом поворота.

Это похоже на ошибку jQuery или ошибку браузера. Есть ли у кого-нибудь обходной путь для Opera / FF?

Если вы получаете предупреждение "Понятно", значит, это работает.

Спасибо за помощь.


jquery css rotation cross-browser
person Jose Rui Santos    schedule 10.06.2011    source источник
comment
Ага, не работает. Так это действительно вопрос или просто заявление? Я бы предпочел, чтобы вы отправили это как ошибку разработчикам jQuery или разработчикам браузера.   -  person mekwall    schedule 10.06.2011
comment
Спасибо, я тоже подозревал, что это ошибка. Извините за непонятный вопрос. Я его только что отредактировал.   -  person Jose Rui Santos    schedule 10.06.2011

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, я разобрался с проблемой. Проблема заключалась в моем коде, который неправильно проверял возвращаемые значения из геттера css().

Раньше у меня было:

if (value === undefined) {...

Проблема была устранена путем изменения вышеуказанного условия на:

if (notDefined(value)) {...

где notDefined - функция

var notDefined = function(value) {
    return value == null || value == undefined || value == "" || value == "none";
}

Чтобы использовать кроссбраузерность, мне нужно сравнить все эти 3 случая, а не только undefined.

Вы можете увидеть обновление здесь

Он работает со всеми последними версиями IE (также IE7 и 8), Firefox, Safari, Chrome и Opera.

person Jose Rui Santos    schedule 10.06.2011
comment
О да. Я должен был это увидеть! Почему бы не сделать правильный кроссбраузерный способ? if (typeof varName === "undefined") { ... } - person mekwall; 13.06.2011