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
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
The attributte "srcset" which was working with polyfill, until chrome 33 is not working anymore in the version 34. As you can see in this link http://jimbobsquarepants.github.io/srcset-polyfill/ if you access using chrome 34 the imagem that shows is the mobile one, because chrome is not reading the srcset, but if you open in a different browse it'll show the desktop image. Any ideas why this is happening?
This happens since the polyfill has feature detection for the srcset attribute:
var srcsetSupported = "srcset" in document.createElement("img");
In Chrom(e|ium) 34 this test yields "true", but in reality the srcset attribute seems to not be supported. So neither a native implementation nor the polyfill handles the attribute.
Edit:
The problem is that Chrome 34 supports the srcset attribute, but only partially: The src is only chosen depending on the device-pixel-ratio (the x setting), but ignores the viewport (w and h settings).
Edit 2:
More research and asking around led me to this:
There are two specifications of the srcset attribute.
The first one includes the possibility to define the maximal viewport width and height for which to use for an image.
The second one (can't find a good link) only allows to define a maximal device-pixel-ratio for which to use an image. To switch images depending on the viewport width, a <picture>-tag will be used, with <source>-elements allowing full media queries to specify when to use which.
Chromium implements the second version of the srcset attribute, but not yet the picture tag.
Here are some discussions about this (Thanks to Mat Marquis to point me to those):
Mozilla
Blink (Chrome)
Workarounds
Use a polyfill that supports the <picture>-tag together with the limited srcset (I don't know one). This will probably be more future-proof (but will probably need adaptions from time to time, the standard has not stabilized yet).
Switch off feature detection in the current polyfill and always use it. This will probably break sometime in the future.
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 working on animating a line graph using d3.js, and have been closely following this example. The code I have written works just like the example...but the bug I am trying to fix is one that is also unfixed in this example. (So going forward, just follow that link to see the bug for yourself)
In Chrome and IE10, the chart works just as it is supposed to. However, in Firefox, the line does not just draw itself from left to right. Instead, the page loads with the line already displayed, then the line erases itself from left to right, and then finally draws itself (again) from left to right like it should have done in the first place.
Also notice that the line drawing is twice as fast on firefox as the other browsers - this means that the issue is with the transition itself: the transition of the stroke-dashoffset property is handled differently by firefox and the other browsers. Specifically, if we remove the transition from the equation, the main difference becomes evident: With stroke-dashoffset set to totalLength, Firefox displays the entire path, as opposed to none of it, like the other browsers do.
So my question is: is this a bug, or is this bad form on my (and duopixel's) part? If the former is the case, does anybody know a workaround or a fix? If the latter, I would be very grateful if you could show me the correct way to do this!
When I zoom in using Firefox, I would like to change the font used on the site to Georgia because it looks better in larger size. Is there a Firefox extension or javascript I can use to make this happen? Or attach the Zoom keyboard hotkey to a user defined css file maybe?
I think the difficulty you're going to run into, unfortunately, is that it is difficult, if not impossible, to tell what zoom level the browser is at using straight up javascript.
That said, the flash plugin, which most people have, seems to have a way (demo).
If you can get a change in that value to trigger a function (not sure if that's possible, but I'm guessing it is), you can just set that function to change the font-type of class foobar to Georgia.