I have a simple wireframe renderer, outputting with svg. An example of use is on the site:
https://0polymer0.github.io/implementation/Teapot/Teapot.html
Polygon elements, representing triangles, are updated in an animation loop.
The svg renderer works well on Chrome, but not on Firefox. Can this be fixed? And if not, why?
I think the performance relevant code is here:
for(let i = 0; i < mesh.length; i++){
dom_mesh[i].setAttributeNS(null,
"points",
triangle2D_to_string(screenspace_mesh[i])
);
}
Things I've tried
Converting childElements() output to an array (dom_mesh) didn't change anything. Reading from children didn't change anything. And directly accessing attributes rather than assigning strings to "points" didn't change anything.
I think the problem has to do with writing to svg, because the benchmarks suggest that's where the browser is spending most of its time.
I'm open to this approach being unworkable, I'm just surprised it is working as well as it is on chrome. It would be nice to understand why.
Related
I can not run this visualization on firefox, while I can do it on Chrome and even on Edge :
https://naustud.io/tech-stack/
Since I was very inspired by it and wanted to analyze it - I am a beginner with d3.js -, the fact that this visualization can not be rendered on all browsers is a bit of a drag on my approach. .
Does anyone have an explanation? Can this be solved? Thank you everyone.
It seems like in Firefox, the clientWidth of the svg element isn't being read, possibly related to this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=874811. Instead the width variable is being set to 0, and that looks like it causes infinite recursion when trying to pack the chart.
To correct this, you can use .node().parentNode.clientWidth (via How to get SVG element dimensions in FireFox?), by adding this before the console.log in techstack-main.js (Line 490):
if (!width) {
width = svg.node().parentNode.clientWidth;
}
I unfortunately need to have a leaflet-dvf app that uses Chart Markers that needs to also work in IE 11. It works fine in Chrome and Firefox. The markers example here doesn't render in IE 11 either:
http://humangeo.github.io/leaflet-dvf/examples/html/markers.html
Is there a workaround ? I tried added the meta X-UA-Compatible IE=edge to my app but that doesn't seem to help.
The fact it doesn't work in IE is because the custom SVG markers are an experimental feature (it's written in source code), and the error comes from
var children = gradient.children;
var childLength = children.length; // Cannot read property length of undefined, line 2739 of the file
So the only solution at the moment is to modify yourself the source code.
The gradient is just a gradient SVG element.
I guess that's because IE does not support children property on DOM elements, but instead you should try to use the childNodes property.
var children = gradient.childNodes;
var childLength = children.length;
I can't test it right now but it might do the trick, or perhaps you will go around these step and find a further issue with IE. Just note that childNodes is different from children because it returns all the nodes of an element, and not just the elements of it, so the length will differ.
See here.
If you don't want to get your hands dirty by debugging the code step by step to make it work on IE (even if I think it's just a little effort to do), use a DOM Shim like this and it will get rid of the issues you face.
One of the project authors here.
This issue should be fixed in the 1.0dev branch (compatible with Leaflet 1.0), but I'll make the same fix in the master branch and push that up. Thanks for pointing this out!
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
I readed many forums, but never found some analogue case.
Javascript canvas font displays in a flickering fashion. The conditions appears to be:
scale of the canvas is not an integer (for example setScale(0.1,0.3))
setTransform(1,0,0,1,0,0); and setScale are used widely to restore setting at every draw of new objects.
Windows. In linux this effect is barely visible (only in some single chars of the text !?).
If the scale is too little (0.5 or less) the effect cannot be seen.
Using save() and restore() seems to have different effect other than setTransform(1,0,0,1,0,0); ans setScale(sx,sy); so i never use them.
I solved the question opting for using only saves and restores : no more flickering. This seems to avoid direct using of setTransoform, and for some reason there should no difference in it.
Sorry for the lack of code, it's a very complicated set of instructions to extract from my coded game.
I hope this is the definitive solution to flickering. Thanks.
Been banging my head against this one for a while, and figured I'd turn to the experts for some advice.
I've made a jQuery snippet that grabs the values from a table and plots them in a line graph on a canvas element (also generated by the JS). All's well in Firefox and Chrome, but Safari and Opera aren't displaying the plotted points. I've reviewed in Firebug, Web Inspector debugger, JSLint, and checked the markup with the w3 validator, but still can't find anything glaringly obvious. I've also tried including the canvas element in the HTML rather than generating it dynamically, as well as substituting a tag pair for the self-closing tag I've been using—all to no avail.
Any chance one of you guys could help me out?
Thanks!
I draw lots of lines in Safari so I checked my code and the pattern is...
beginPath
moveTo
lineTo(s)
closePath or stroke
In your code moveTo is before beginPath, so I switched that in one of my apps and it stopped drawing, so try switching those around.
I think this is a problem of the time when you call stroke(). Try to call it only after the for loop, and try differents positions of the closePath call.