Plugin breaks on Safari(Windows/Mac) and Chrome(Mac)

[markgenest]

The plugin is great! However, there is the slight issue of it breaking for Safari (Windows/Mac) and Chrome(Mac)

This is the way it should look:

This is what happens when it breaks:

and this:

It seems like it either doesn't calculate the heights at all, or calculates some of them and negates others.

Safari for Windows 5.1.7.
Chrome for Mac 31.0.1650.63

Any fix would be greatly appreciated!!!

Thanks.

[liabru]

I've just committed a fix for this, could you please try the latest master version?

[markgenest]

Thanks for the quick fix. However it still seems to break, albeit more uniformly now in Safari for windows:

It seems like it still has a calculated height problem.

When call the function on an element within the container, like the the person's name, it works. But if I put it on the outer container, it breaks. I'm wanting to call the function around the outer item wrapper container like so:

    $(document).ready(function() {
        $('.user-item').matchHeight();
    });

Any further help would be greatly appreciated.

Thanks!

[markgenest]

To add further, I've been playing around, and it seems on Safari that it might be a padding issue. As above I am calling the function on the outer wrapper element, but now by row:

    $(function() {
         var byRow = $('article').hasClass('row');

        $(function() {
            $('.user-item').matchHeight(byRow);
        });
    });

I have an absolutely positioned element on the bottom of each wrapper, and have padded the wrapper at the bottom to accommodate for this. When I remove the absolutely positioned element and call the function on the wrapper, the padding in firefox works:

However, it breaks and gets cut off in Safari:

Any ideas why?

Thanks for all your help!

[liabru]

Hmm, seems like there maybe some more issues than what I saw in the demo page.

Would you be able to provide a jsfiddle please?

[markgenest]

http://jsfiddle.net/mgenest/024Lpqs0/23/

It seems to work in this demo which leads me to the conclusion that it must be another script I have on in my app that is conflicting somehow. Not sure how to fix that but painstakingly troubleshoot. It works on Safari arbitrarily and sometimes calculates the proper padding, other times, it doesn't.

[markgenest]

It seems if I wrap the function in a setTimeout it works:

    setTimeout(function() {
        $('.user-item').matchHeight();
    }, 200);

Other equal height plugins mentioned a problem with Google Fonts and their loading first before the height calculation is done, so this gives it enough time to properly load the fonts before the script is called.

Not sure how to condition the function so it times out only for Safari and not the other browsers because the page load becomes kind of jerky with the modules rearranging themselves first unmatched and then matched.

Any suggestions?

Thanks for your help!

[liabru]

One thing I can see is you're using some transitions?

Can you try turning all of those off, because matchHeight will update before the transition finishes.

Also regarding webfonts, I think in some browsers they will be caught by the plugin via the window load event, but probably not all. I think you should look at webfontloader if they are causing issues too.

[markgenest]

I turned off all the transitions for the modules. They are fading in using animation. It doesn't seem to do anything. Safari now won't even calculate the heights at all. The setTimeout function is the only thing that seems to work leading me to believe it may be the font issue. Thanks for the advice on webfontloader. Will take a look.

Warmest Regards.

[liabru]

Hmm well I went through and removed every single transition from theme.css and used the latest matchHeight in this fiddle:

http://jsfiddle.net/024Lpqs0/24/

This seems to work for me in Safari for Windows, can you try it?

[markgenest]

Yeah, I need transitions. That doesn't seem to be a viable solution for me.

Thanks anyway.

On Sep 21, 2014, at 12:06 PM, Liam Brummitt notifications@github.com
wrote:

Hmm well I went through and removed every single transition from theme.css
and used the latest matchHeight in this fiddle:

http://jsfiddle.net/024Lpqs0/24/

This seems to work for me in Safari for Windows, can you try it?

—
Reply to this email directly or view it on GitHub
#34 (comment)
.

[liabru]

Fade transitions should be fine, it's just the ones that were modifying the height that aren't supported.
I think those were caused by some transition: all rules?

Thanks for raising the Safari issue though, I'll close this now but feel free to comment if there are related issues.

[aljets]

I had the same issue on Safari only. Was using bootstrap. But calling $(window).on('load', ...) on my class names and removing data-mh="foo" made it work. Didn't really want that though.

Some fiddling around, it seems bootstraps .thumbnail class uses transitions (subtle!). Removing transitions made it work.

[liabru]

@aljets thanks for the info and from what you describe it definitely sounds like transitions are the problem here. So basically, avoid them!