jquery CSS не работает в webkit

Question

Я пытаюсь применить некоторые CSS к тегу изображения, если изображение портретное, но по какой-то причине .css () не работает в webkit. В основном тег изображения не получает свойство 'style'. Вот мой код:

$(document).ready(function () {

    $('.listing .item .thumb img').each(function () {

          var _img = $(this);
          var _imgWidth = _img.outerWidth();
          var _imgHeight = _img.outerHeight();

          if (_imgHeight > _imgWidth) {
               _img.css('top', '-40%');
          }
    });
});

<div class="listing about">
    <div class="item">
        <a href="#" class="thumb">
            <img src="../_uploads/siteassets/images/thumb-carousel-2.jpg" />
            <span class="frame"></span>
        </a>
        <span class="snippet">
            <a href="#" class="title">Name Surname</a>
            <span class="date">Role in the company</span>
            <p class="description">Lorem ipsum dolor sit amet...</p>
        </span>
    </div>
</div>

Я пытался использовать .attr () вместо .css (), но ничего. Это не работает!

Есть идеи почему?

Answer 1

Когда срабатывает .ready(), изображения, вероятно, не имеют установленных размеров.

0 > 0 имеет значение false, поэтому свойство top никогда не устанавливается.

Используйте $(window).load(); или этот плагин .

Answer 2

Webkit не интерпретирует смещение влево или вверх из-за того, что позиция по умолчанию - none, добавьте позиция относительно . Геккон Мозиллы интерпретирует смещение, когда имеет положение относительно или нет.

    <div style="position: relative; left: 10px;"></div>
    <script>
         alert($('div').offset().left);
    </script>