My problem is that the svg based map does not seem in Firefox.
Chrome, Edge, Opera is OK, only Firefox doesn't.
The site is: http://2018.tvep.hu/tagletszam-alakulasa.html
I appreciate any help! Thanks: Laszlo Varga
The filter inner-shadow is invalid because the first feComposite references an undefined offset-blur as its in2. Firefox is, as usual and rightfully, more strict and doesn't just ignore the problematic input. Removing the in2="offset-blur" makes it work because it will then automatically use the result of the previous filter (from the SVG 1.1 spec):
If no value is provided and this is a subsequent filter primitive, then this filter primitive will use the result from the previous filter primitive as its input.
Adding result="offset-blur" to the feOffset above it would achive the same.
Related
If the file specified on an SVG <image> element is not found then the results are unpredictable. In Firefox, I get no indication and no error. In Chrome, I get some default box-shaped scenery image.
Is there a way to provide an alternative image, such as a nice error marker? I have seen solutions for a similar issue in HTML that involve the attribute:
onerror="this.onerror=null; this.src='Default.jpg'"
But this does not work in my SVG (even after changing src to href). I have also seen a cheat where using an additional src attribute provides a fallback for normal the href (see SVG Fallbacks) but it seemed to rely on a quirk of the implementation within the browser and no longer works (at least not in Firefox).
I'm looking for a method that works at least in Firefox, Chrome, and Edge.
You want
this.href.baseVal='Default.jpg'
Due to SVG's support for SMIL
I'm having trouble with my Kendo UI Chart, where I want data stacked and grouped.
The problem is that when I group the data, the bars is no longer chronological (in different browsers, more on that later).
Can someone please help?
I've set up an example in Telerik Dojo.
This seems to work, except in Chrome.
However, this is just a part of the code. The original code is angularjs-based, and with a whole lot of code to process settings to create options. That however, works in Chrome and Firefox, but not in IE and Edge.
Can someone point me in a direction to solve this in "all" browsers?
So, my co-worker Martin pointed me to this solution:
dataBound: function(e) {
var axis = e.sender.options.categoryAxis;
axis.categories = axis.categories.sort();
}
Works great in this minimized example, but didn't work in my more complex code.
Turns out that my code removes the categoryField from the series in some cases. With the categoryField still there, the sorting works.
Now I need to figure out why and when the categoryField must be removed, but that's not a question for Stack Overflow.
Firefox under version 28 has an issue where a path with a stroke-dashoffset property will render differently depending on the stroke-width amount. There is a known fix which is to divide stroke-dashoffset with stroke-width, but applying this across the board will mean other browsers will now display incorrectly.
https://bugzilla.mozilla.org/show_bug.cgi?id=661812
The quickest solution I can think of is is simply check for browser type and version number, but generally this seems to be regarded as a bad idea. Does anyone know a way to test the result without going down this route?
I have put together a Codepen which allows you to change the width of an animated offset, and a toggle for the fix so you can see for yourselves in different browsers. http://codepen.io/MattyBalaam/full/lGJkc
I understand and agree with the shift from browser detection to feature detection but it won't help me with this problem: I'm using the Dosis font, whose letters are displayed farther apart by Firefox than by other browsers. Currently, I'm using navigator.userAgent to detect the browser and adjust letter-spacing accordingly. Now, what Firefox feature could help me make this detection?
The first solution that comes to mind is that, if the spaced-out letters result in overall longer text strings than normal, create an invisible <div> somewhere with Dosis text and check its width. This would check for the specific error, not just the browser.
I am using three.js to do some online interactive modelling of geology, and have been creating image URI using the Canvas Element (output would be: data:image/png;base64,).
The image creation works fine in Chrome,Firefox, and Safari, but using the images in three.js as a texture doesn't show up in Firefox.
The simplest demonstration I can show is by changing one line of a three.js example, to substitue an image URL for a dataURI, and use that as a texture.
http://visiblegeology.com/renderingProblem/
This works fine for me in Chrome and Safari, but just doesn't show up in Firefox.
I was wondering if anyone had any advice, work-arounds, or thoughts.
Thanks for any help,
Rowan
I've checked using a regular img tag. It works that way in Firefox. So the problem would seem to be the combination of three.js and the data uri.
This example by mrdoob doesn't work in Firefox either: http://mrdoob.github.com/three.js/examples/webgl_particles_shapes.html
A few suggestions:
check if you are using the latest three code.
try removing the final equals sign of the data uri. It is used for padding and may not be necessary.
try disabling your add ons one by one, as they may interfere as well