Comments (13)
I've just committed a fix for this, could you please try the latest master version?
from jquery-match-height.
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!
from jquery-match-height.
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!
from jquery-match-height.
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?
from jquery-match-height.
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.
from jquery-match-height.
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!
from jquery-match-height.
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.
from jquery-match-height.
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.
from jquery-match-height.
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?
from jquery-match-height.
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 [email protected]
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)
.
from jquery-match-height.
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.
from jquery-match-height.
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.
from jquery-match-height.
@aljets thanks for the info and from what you describe it definitely sounds like transitions are the problem here. So basically, avoid them!
from jquery-match-height.
Related Issues (20)
- Footer not staying on bottom of div HOT 3
- Rounding down height HOT 2
- Firefox Quantum problem HOT 2
- Add option to disable auto matching data-mh HOT 2
- It is posible to disable byRow option with data-api? HOT 2
- Columns only firing on window reload w/AJAX + Facet WP HOT 1
- Match height only working on certain pages HOT 1
- only firing on some elements, not all - but all on resize HOT 4
- wildcard target class?
- Latest jquery HOT 4
- Matchheight stopped working on orientation change on all my sites HOT 1
- Height matching AJAXed elements using [data-mh] method HOT 2
- How to work with Accrodion content Parent matchheight detected rows should still work.
- A different, faster approach?
- Overlapping elements HOT 2
- Issue with nth-child and display property.
- Having multiple 'property' attributes
- Error
- documentation for _update and _applyDataApi
- When Code Splitting and adding jquery-match-height to the second script file it fails to register.
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from jquery-match-height.