resizing not working on firefox

Question

I'm using jQuery to make all of my divs the same height. (It seems to be the only solution with my code). I'm also using some css to invert the order of divs for mobile so the titles always display under the image. Everything works perfect (Resizing and arranges correctly) in chrome, safari and opera. In firefox however the pics don't seem to resize and everything goes out of whack. Weird enough, if you refresh the browser at any brake (in firefox) it pops into place but again, it doesn't resize with the window.

I've a feeling it may be either the height script or the reordering css. But I can't figure out what is causing this.

Please see my code below. Any help is greatly appreciated.

// ****************************************************
// MATCH COLUMN HEIGHT
// ****************************************************

equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.eqHeight');
});


$(window).resize(function(){
  equalheight('.eqHeight');
});

CSS to reorder divs

.portThumb {
overflow: hidden;
display:table;
@include margin ($half-spacing - 7, -bottom);

    @include breakpoint(sm) { /* SM */
    @include margin ($half-spacing + 5, -bottom);
    }

    @include breakpoint(md) { /* MD */
    @include margin (-1px, -bottom);
    }

    img {
    width: 100%;
    max-width: 100%;
    height: auto;
    } /* /img */

    .fadeActive {
    @include opacity(1, 100, 1);
    }

    .fadeInactive {
    @include opacity(1, 30, .3);
    }
} 

.bottom {
display:table-footer-group; 
}

.top.xsSplit100 {
display:table-header-group;
float:none;

    @include breakpoint(md) {
    float:left;
    }
}

score 1 · Accepted Answer · edited May 23 '17 at 11:50

1

I think it would be better for performance if you will keep aspect ratio of resized block elements using pure CSS. Take a look for this answer.

edited May 23 '17 at 11:50

Community

1
1

answered Jan 03 '15 at 20:59

Michał Szepielak

284
1
4

Thanks for the suggestion. I will look into maybe implementing it in the future. As for this issue, I just tried it and it does not solve it. Thanks again. – Daniel Jan 03 '15 at 21:05
1

For FireFox to create a grayscale effect you create a fixed size SVG image with a grayscale filter. This is the reason why your blocks are not resized properly. You should update js script which creates grayscale effect. – Michał Szepielak Jan 03 '15 at 21:32
Yes. I just found that out too. Let me try and find a different grayscale solution. Thanks man. – Daniel Jan 03 '15 at 21:38

resizing not working on firefox

1 Answers1