Проблема ширины при изменении размера браузера

Question

Я имею li элементы с position:absolute и я размещаю их, используя transform:translate()по javascript. Мне нужно изменить их положение при изменении размера окна браузера, он работает нормально, но когдаli ширина меняется между 50% а также 25% в медиа-запросе элементы не позиционируются должным образом при некоторых размерах экрана, потому что width элементов отличается от того, в котором рассчитывается javascript.

HTML:

<div class="galleryList">
  <ul>
    <li class="filter-gallery">
      <a href="#">
        <img src="pics/g1.jpg" alt="">
      </a>
      </li>
      <li class="filter-gallery">
        <a href="#">
        <img src="pics/g2.jpg" alt="">
        </a>
      </li>
      <li class="filter-gallery">
        <a href="#">
          <img src="pics/g3.jpg" alt="">
        </a>
      </li>
      <li class="filter-gallery">
        <a href="#">
          <img src="pics/g4.jpg" alt="">
        </a>
      </li>
      <li class="filter-gallery">
        <a href="#">
          <img src="pics/g5.jpg" alt="">
        </a>
      </li>
      <li class="filter-gallery">
      <a href="#">
        <img src="pics/g6.jpg" alt="">
      </a>
      </li>
      <li class="filter-gallery">
      <a href="#">
        <img src="pics/g7.jpg" alt="">
      </a>
      </li>
      <li class="filter-gallery">
        <a href="#">
          <img src="pics/g8.jpg" alt="">
        </a>
        </li>
      </ul>
    </div>

CSS:

    img{
       max-width:100%;
    }
    .galleryList ul{
      position: relative;
    }
    .filter-gallery{
      width: 50%;
      position: absolute;
      top:0;
      left: 0;
      overflow: hidden;
    }
    @media screen and (min-width: 620px) {
      .filter-gallery{
        width: 25%;
      }
    }

jQuery:

    $(document).ready(function(){

      var filterItems = $(".filter-gallery") ,
      galleryList = $(".galleryList") ;

      positionItems(filterItems);

      function positionItems(filterItems){

        var totalFilterItemswidth = 0 , rows = 0 , newI = 0 , useNewI= false ,
        filterItemsHeight = filterItems.outerHeight() ,
        filterItemsWidth = filterItems.outerWidth() ,
        galleryListWidth = galleryList.outerWidth();

        console.log(filterItemsWidth , filterItems[0]); 

        //positioning filter items
        for(var i=0 ; i < filterItems.length ; i++){
          var currentElement = $(filterItems[i]) ,
          elementIndex = i ,
          x ,
          y = 0;

          if(totalFilterItemswidth == galleryListWidth){ // 1 row completed
            rows++;
            totalFilterItemswidth = 0; //start adding widths again for next rows
            newI = 0;
            useNewI = true;
          }

          if(useNewI){
            elementIndex = newI++;
          }

          y = filterItemsHeight * rows;
          x = elementIndex * filterItemsWidth ,

          currentElement.css({
            transform: "translate(" + x + "px ," + y +"px )" 
          });

          filterItemsWidth = filterItems.outerWidth();

          totalFilterItemswidth += filterItemsWidth;
        }

        galleryList.css({
          height : filterItemsHeight * (rows+1) + "px"
        });

        }

        $(window).resize(function(){
          positionItems(filterItems);
        });
    });

console.log() показывает ширину, отличную от фактической для некоторых размеров экрана, например 627px и когда я снова изменяю размер окна, он работает нормально.

Не могу понять, почему так происходит и как это исправить.

Спасибо