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

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 и когда я снова изменяю размер окна, оно работает нормально.

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

Спасибо