So I'm using Dessandro's Masonry.js lib which was fully functional a short while ago, however, due to some unknown reason, it has ceased to function in both Safari and Chrome (can't speak to ie yet) but is still working fully in Firefox. If it were working in Chrome rather than Firefox I'd figure it was a css issue of some sort, possibly with transitions, but am at a bit of a loss as to where to diagnose this particular dilemma.
Masonry instantiation in coffeescript
window.presets = () ->
$(".table-header").hide()
$container = $(".employee-list")
window.msnry = $(".employee-list").masonry(columnWidth: 100)
showGrid msnry
loadImages $container
Well I suppose I feel a bit silly but it wound up being transitions. Masonry 'items' apparently will malfunction if adding transitions (no matter the type) onto boxes. I'm still at a loss as to why this would occur for Chroma and Safari but not Firefox so if anyone has any insight on the matter it would be much appreciated.
Related
Folks -
Longtime lurker, first time poster. I've found many answers here in the past, and have always appreciated the expertise. I'm a bit of a noob, so bear with me:
I have a landing page. It displays well in Chrome, Firefox, Safari, and older versions of IE. All of the above include the the Google ReCaptcha - no issues, widgets work, etc.
IE 11 turns this to mush. My graphic fails to load, and it seems the recaptcha moves itself to the full width of the page instead of the small part I've intended.
Oddly enough, if I grab the sides of the browser window and adjust the width in any way (wider or narrower) the image snaps in where it should be, and the page looks perfect. Likewise, if I inspect the element, the page loads exactly as intended.
This seems like it should mean something to me, but my knowledge is too limited to get exactly what I'm being told. Can anyone shed some light on this for me?
I can furnish source code and screenshots if that's required.
Regards, Cheers, and thanks for any thoughts -
CDM
#Romulo helped me tremendously with this issue. The entire page was being loaded by a script, and there were errors within the script itself that needed correcting. The solution required a style block to be moved, which solved the issue. This was probably a once-in-a-lifetime issue, but if you find this page and think this might be what you're dealing with, feel free to message me and I'll be happy to discuss further.
I have a slider which is now completely unusable in the latest versions of chrome and safari, older versions show it fine. While developing it I tested chrome, firefox and IE, They all worked fine (except some style issues in the older ie's but the animation was fine).
Minimal test case of it here
http://www.thetrainingconcept.co.uk/error.htm
The javascript can be found here
http://assets.thetrainingconcept.co.uk/www/js/plugins/jquery.feature-slide.js?v=1.0.0
I can not figure this one out at all, there are no js errors, I profiled it and that looks ok. I tried making a simple test case to profile it but got the exact same behavior.
I really hope someone has some idea of what's going wrong here.
Edit: I'll also note that I've searched high and low, read many "slow animations in chrome" issues, none of which have been any help. Remember, this worked absolutely fine until a recent update affecting chrome and safari. The version of chrome I'm using is Version 23.0.1271.97 m, if you have an older version it may appear correctly.
I've figured it out. The answer, in my opinion, is not obvious, if it is to someone else, could they explain it to me please?
So, animate.css applies -webkit-backface-visibility:hidden; to the body tag. For some reason, this caused all the problems I've faced with the javascript animation being awful. Luckily I'm not using the 3D animations from that library, so I can remove it and solve my issue.
Now, I'm not sure if this is a bug in webkit or a bug in animate.css, I'm leaning towards it being a problem with webkit as I don't understand why that property should cause the slowdowns it did to none css animations.
http://daneden.me/animate/ - the css animation library
http://css-tricks.com/almanac/properties/b/backface-visibility/ - more explanation about the backface-visibility property
I'm using Raphael 2.1 to draw 15 lines at the same time. Each lines is made up of 50 2 pixel paths. Performance is best in Safari and Chrome, good in FF, weak in Opera, and chokes in IE9. Microsoft says that SVG will run in IE9, but Raphael.svg returns false in IE9.
I've been reading posts related Raphael and IE all day, and the only solution that I've seen for improving Raphael's performance in IE9 is to install Chrome Frame.
Has anyone encountered any other solutions?
Raphael uses svg in IE9 and work with reasonable performance. You have to be careful that IE is not being forced into IE8 standards mode (which frequently happens). If IE9 falls back to IE8 standards then it will end up using VML, which is very slow, and there is no efficient alternative to SVG in general in IE8 or below.
When faced with this problem using IE8 I ended up using divs and css to achieve rendering of lines, rectangles and text. Since that's all I required it was very fast even in IE8, helped out by buffering the divs inside the container. If your problem is simple enough, you may wish to consider a pure DOM solution. See: https://github.com/Matt-Esch/simpleCanvas.js for inspiration.
There is a page that uses PHP to fetch search results from Google Search API and then it puts the results on the page some funny way in a circle. The code may look crappy but seems that it works more or less fine in Firefox. When you enter a search query and click submit button or Next/Previous links, it fills the wheel with results. The problem is its work in IE. It works there very slowly and then it doesn't clear the wheel before filling in new data, but puts it over that. My friend asked me to help him with this code. Please give me a piece of advice how I can fix it. Thanks so much!
Raphael runs very slowly under IE documented here.
As I understand it, VML itself in IE is fast enough, but the Raphael layer has some inefficiency.
I see you're using Raphael.js, which renders vector in VML/SVG (depending on browser). IE8 has degraded support for VML, unfortunately, and I hear it's also quite a bit slower than IE7. BTW, in IE7 it's kinda funny looking.
In terms of Raphael, it may be something as simple as resetting some context, I'm not sure. I've looked at Raphael before, but never used it.
Excuse my ignorance for I'm a rookie programmer and my language mistakes for I'm a non native english speaker.
I've got a page that, on some click events triggers some javascript and loads ,via php, content into an iframe which also performs some javascript actions (on itself and on the parent page). Everything works fine on FF and all the features work fine in IE too. But the performance in IE is terribly slow...one of the main features is to change opacity of some pictures on mouse up, and it takes 2s+ for IE to display the new opacity. Why? and more important, what can I do to fix it?
Thanks in advance,
Irene
IE has a horribly slow JavaScript engine compared to every other major browser (I'm speaking to IE8 not IE9+)...that's just how it is. You may want to disable certain things in IE, and of course optimize your script overall.
You may for example want to disable the fade in IE, or give it far fewer frames (longer interval in-between steps), because of its DirectX opacity filter, it's much slower than other browsers in most fade situations.
To profile performance problems specific to IE, I highly recommend dynaTrace AJAX edition, it's a free performance profiler made just for IE.
Benchmarks showing how slow things can be in IE: http://www.favbrowser.com/chrome-vs-opera-vs-firefox-vs-internet-explorer-vs-safari/
You might need to experiment with different ways of manipulating the DOM to increase the performance in IE.
IE is known to be a bit slow (sarcasm). I don't know exactly what you are doing, but maybe you might want to remove some effects if the user is using IE? Maybe you are doing a lot of DOM changes.
It would be handy to see the code in order to give you tips on how to get a better performance.
Ok, here you go, this is probably the script that's creating most of the problems...any suggestions?
$(function() {
$("#myTable").draggable({
containment:'parent',
drag:function() {
$("#myTable").css("opacity", "0.6");
$("#myTable").css("background-image", 'none');
$("#galframe").css("opacity", "1.0");
},
stop:function(){
$("#myTable").css("opacity", "1.0");
$("#galframe").css("opacity", "0.6");
var $image = $("#galframe").contents().find("#jgal div.active img");
var src=$image[0].src;
$("#myTable").css("background-image", 'url(' + src + ')');
$position = $("#myTable").position();
$("#myTable").css("backgroundPosition", (-parseInt($position.left)+549).toString()+ "px " + (-parseInt($position.top)+20).toString() + "px");
$("#myTable").css("background-repeat", "no-repeat");
}
});
});