I'm finding a very annoying behaviour on Chrome.
I've a page where I'm using a js graph library to build Gantt diagrams with vacation days of company workers.
The library uses HTML5 canvas to draw the graph, and the page just loads data based on date and department parameters and feeds the library methods.
Both, Firefox and Chrome, work perfectly and draws the Gantt diagrams as expected, however, when I try to print it, I find that Chrome changes the diagram if I alter any of printing attributes on page configuration dialog.
Also, after closing printing dialog, the graph on the page gets also changed.
Printing in Firefox hasn't any effect on the page and doesn't redraws the graph when changing printing parameters.
I've been looking for info into this on internet but found nothing except a maybe related bug on Chrome from 2014 that seems to be fixed.
I'm a bit lose with this and would appreciate any insight on the matter.
Related
I am using pagePiling.js, and have added a couple of extra sections. These are using iFrames to load Highcharts graphs, as can be seen here. However, at the moment, all 12 iFrames respectively the graphs are being loaded, which makes the user wait a few seconds unnecessarily on the first page (and consumes bandwidth).
Is there any way to load the iFrames only the moment they are getting the focus? Or perhaps, a bit smoother, to load the next-upcoming graph while the current graph is being focussed on? I haven't really found something like this.
Thanks for any hints.
I've been working on making a map related visualisation in D3 for a site that for historical reasons is stuck using some old versions of jQuery, and I've come across a weird bug when implementing drag behaviour on the map.
I've extracted the D3 code, and put it onto a gist listed below, and been able to replicate the strange behaviour, which you can trigger by:
Try loading the page below
Clicking on a country
Trying to select some text
I can't seem to select text after I've zoomed into a country, and I suspect it's down to line 130 in the d3_map.js file
The problem gist
The gist is here:
https://gist.github.com/mrchrisadams/89d053977513e6042adf
The rendered gist on http://bl.ocks.org, is here:
http://bl.ocks.org/mrchrisadams/89d053977513e6042adf
On the strange mismatch of javascript libraries
It's strange to see such an old version of jQuery, I know. I'm unable to change it without breaking other functinality on the site, which is why we're stuck with the old library.
Why is this happening, and how do I reinstate normal text selection again?
I'm utterly stumped as to why triggering a zoom knocks out the ability to select text, and I'd welcome any pointers, because I'm somewhat at a loss now.
Oh well, fingers crossed...
I'm putting together a d3 visualisation using force layouts for use in in the Qualtrics questionnaire website. Everything seems to be working across the different browsers in a jsfiddle. Its possible to drag exemplars from the exemplar box (African male for e.g.) onto the main canvas. One can right-click on a node in the main canvas to bring up a right-click menu to change the node properties or drag the nodes around the canvas.
javascript too large to paste.
Note that the jsfiddle works in Internet Explorer 11. However, when I add this visualisation to the Qualtrics website it breaks in IE11. Far more SVG elements are added than there is data, as shown in the image below.
Note that this combination of Qualtrics and d3 visualisation works fine in Firefox, Chrome and Safari. Unfortunately the Qualtrics support team doesn't support custom code and I'm not proficient enough in javascript to track this down. Any ideas on what might cause this?
For this to work in Qualtrics:
Add the d3.js library in the Qualtrics header
Uncomment Qualtrics.SurveyEngine.addOnload
Comment out create_d3_interaction(false);
Update 1
I've debugged this a bit more.
In the update_svg_node method I do a selection of the SVG element:
var svg = d3.select('.' + svg_class);
var nodes = svg.selectAll('.' + class_id)
.data(f.nodes());
The problem seems to occur in the selectAll -- for some reason it is not matching the class selection with the data. Note this only happens in Qualtrics and IE11 but works fine in IE11 in the fiddle. Note this is an updated version of the fiddle, but the problem still occurs the same way.
So nodes that should be in the UPDATE class are in the ENTER class for some reason.
I have been making a simple website with AngularJS and D3JS and created a custom circle mesh library (very crude). It all works fine in Firefox but it doesn't work in Chrome. The website is up at petoknm.github.io . In my homepage I have this circle mesh thing that displays the circles. But when I transition (directly) to another page with this circle mesh (programmming page) it starts behaving differently. And when I go from programming to home it starts to ignore the clipPath on the first two images (two probably because of the two images in the programming page). The svg is identical (I checked only the first three 'a' tags with the images and the first three clipPaths) to the correct svg that was there first... I don't know what happens.
This is a screenshot just after first loading the page
http://i.stack.imgur.com/2fAI6.png
This is a screenshot after coming from the programming page
http://i.stack.imgur.com/JLO3r.png
As you can see the clipPath is still in the svg and "shown" by Chrome but is not actually used (or is ignored).
Please help, I have no idea why it happens and why it's no problem for Firefox
I'll make an educated guess and say it's because your programming page is reusing ids "#clippath0" and "#clippath1". Because it's a single page site and you are replacing the parts of the DOM that contain those references, perhaps there is a bug in Chrome where it getting confused over what they point to.
Try using different sets of ids for each page and see if that fixes it. Maybe you could add different prefixes for each page (eg "#homeclippath0" and "#programmingclippath0").
It does seem like a bug in Chrome though. Perhaps you might want to report it.
I'm working on a prototype system which will act as a proof of concept that an existing system can be made a lot more interactive.
It basically emulates our main software package but over the internet using JSONP requests to update a load of images and Raphael vectors to make it look like everything's running.
I'm having trouble on Chrome however with Raphael not drawing vectors "off-screen". What I mean by "off-screen" is that the main app runs through an iframe as it relies on cross-domain long poll comet through AJAX to get communicate back and forth. Below is an image demonstrating what I mean.
Here I've scrolled a long a little bit in the iframe to look at the bits "offscreen" and you can hopefully see that the grey arrows aren't rendered. I've used Chrome's developer tools to highlight over the SVN tag, showing that it's only given 450px by 810px to the SVG tag, which is the same size allocated for the iframe.
It's worth pointing out that it renders fine in Firefox. Any ideas?
I've had a similar problem and found a bug report for the WebKit project that seemed related:
https://bugs.webkit.org/show_bug.cgi?id=64823
According to the comments, it's a bug in the rendering engine and there's no workaround aside from losing the iframe or resorting to other means of scrolling the SVG viewport (like moving all the elements within the SVG element).
On the upside, version 16.0.912.21 has been released to the beta channel today and it seems that the bug has been fixed. I've also checked the latest chromium build (17.something) and the bug hasn't resurfaced. I'm guessing the fix should find its way into the stable channel in a couple of weeks.