Develop Reference

Would the version of Chrome affect the behavior of a JavaScript library?

I ran into a bug that seems very nuanced and strange. I am using OpenLayers (v4.0.1) in a web application to display multiple WMS layers from a GeoServer (v2.8.2). Everything seemed to be working great until Windows 10 did a big update. Shortly thereafter, my browser began to crash when attempting to view the page on which the map and all of its layers should be displayed.
After a lot of digging, it appeared that this issue only shows up in Chrome Version 60 (60.0.3112.90 to be exact). I tried to reproduce the issue on multiple OS's and browser combinations (Linux/Windows/Mac and Firefox/IE/Edge/Chrome Version 59) and it works great everywhere except on Chrome 60 (across all OS's).
Though still hard to pin-point exactly, when doing a step-through of the JavaScript to find where the hang-up occurs, it is definitely happening somewhere inside of the OpenLayers code. Another key discovery is that the error does not occur at all if the browser window size is "small" enough. In other words, if I resize my window and try again, it will suddenly work consistently once a somewhat-random-seeming, certain browser size is reached. It seems to be more area-dependent, though, than a specific height/width constraint, as various height/width combinations will either work or not work.
At this point I have no great idea on how to resolve this issue, so I'm starting here by simply wondering if anyone knows if it would make sense that something in Chrome 60 is changing the behavior of the OpenLayers JavaScript library? If so, I'd want to open up an official GitHub issue with them. If not, would it be a Chrome issue I'd report? I'm reluctant to believe it is something that I have programmed, as it works in every other browser.
Thoughts?

This does indeed sound like a Chrome bug. Please file a bug at crbug.com/new, and include:
repro instructions (ideally, a link to a site that will trigger the crash)
any crash reports you see in chrome://crashes (if this is what caused them)
If you post the bug number here, I'll make sure it gets looked at. Thanks!

Animating gradients in SVG using JavaScript. Weird behaviour of Internet Explorer

I am trying to animate a ratings control (star) by updating the gradient coordinates.
Please find the svg here. This is perfectly working in firefox. but in Internet explorer (IE 11), it is not getting rendered. I tried by removing polygons and adding them back. But nothing worked. In chrome, for first second first star is filled, then erased and getting animated! Please look into this.
Thanks in advance :)
[Update]:
I am able to produce animation in the control I referred above. check the link. I donot know y, but in IE (ie11) updating a gradient using JavaScript is not updating the polygon using the gradient. In ff & chrome , after updating gradient data we can observe the change in poolygon or some other object using the gradient. So, in IE, rather than updating existing svg oibjects, I started removing object, creating a new object with updated data and added to SVG tree. It started working. But it is an overhead. Anyone can suggest be a better approach! And, initial blink in chrome and IE still exists. As of now, I am hiding the initial blink by using timer function in code after calling animate() object. Can anyone help in solving this?
thanks

is pixelHeight still supported in HTML5

i am trying to make a rather old javascript work in newer browsers(currently only supports ie6).
Well it isn't working and is littered with
document.getElementById('idValue').style.pixelHeight = x
i had never seen this before so did some research, and everything i found is dated 2008 and earlier.
So is pixelHeight still supported in HTML5? (and in firefox and chrome)
EDIT: Zenith said it won't work in firefox, so how should i be doing this in a cross browser way?
EDIT2: we are trying to make a user resizeable panel so it was going
get pixelHeight += mouseMovement
but when i enter for the first time height = 'auto', off to do some more research, thanks guys

Short: Don't use it.
Use:
document.getElementById('idValue').style.height = x+'px';

From what I've been able to glean, pixelHeight was supported by IE6 and Opera 8 and I've not been able to find any documentation about it anywhere doing a quick Google, my javascript books and MDN. Using it must be dangerous ground to be walking on.
EDIT:
One thing I did find is that pixelHeight retrieves height so, perhaps changing to that would solve the problem. That site says pixelHeight works in all browsers but Firefox. However, it's obviously non-standard so you shouldn't use it while height is standard.

I replaced var height = pixelHeight with clientHeight.
and added + "px" onto my calculations.
This seems as standard as I can get it (well, it works on Firefox, Chrome, and IE10 is using completely different code CSS3 and grid based).

Extremely slow webkit animation since update

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

Internet Explorer works very slowly executing JS code

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.