I recently had problems with displaying SVG files in Firefox, but I overcame that by explicitly stating the width and height in the .svg file source. That fixed the problem for me on my Firefox, but some users still report problems on some versions. Are you able to reproduce the problem? What might be the solution? This is the website: http://naratifrevue.cz – it's using a glitch script on SVG images in the header.
Related
I have a Google Chrome problem on macOS Sierra: Image: SVG rendering bug
As you can see in the image above, the SVG background images in the stackoverflow answering section are not rendered correctly. That also applies for the stackoverflow logo and for any other SVG background images.
I solved the problem temporary by deinstall and install Chrome again. The next day I had the same problem. Chrome is up to date on version 56.0.2924.87 (64-bit).
I also have the issue that if I hover over an DOM element in the 'Elements' tab in dev-tools, the element is not highlighted on the page. This was also gone after reinstalling but also appeared the next day again.
Any ideas about these issues?
I have a problem with SVG renderring in Firefox. Whilst it works in Safari, Chrome or even in IE, it doesn't work in Firefox. Inspecting the element it seems that the layers are there, but only background is visible as if it's z-index is higher than the z-index of the others.
Rendered in Firefox:
SVG logo in Firefox
Link to the original source file: SVG File
Thanks for your help.
PS: I used Sketch 3 to export the svg. If it helps somehow.
You're experiencing bug 995813.
I fixed this bug some time ago but that change is still making its way through the release process so your example will display correctly from Firefox 31 onwards which will be released on 22 July 2014.
In the meantime if you move the fill="white" from the <mask> element to the child <use> element this will work around the Firefox bug.
When i fix the issues for Mozilla compatibility they work fine on my system, but when i want to check those changes on a different PC using same version of Mozilla, I am getting some UI issues.
Same version of Mozilla are giving different height & widths of same div when checked on different computers.
Screen size is same, screen resolution is same and every thing is working fine when i use Chrome on both the PCs.
Please advice me if i am missing something here that might help me in solving this issue.
The reason for this inconsistencies in things like default line heights, widths margins and font sizes of headings is due to default behaviours of own browser. To resolved this you can use reset or normalize css to have consistent behaviour first. Then give your custom or required css on element.
Please find the links below:
http://meyerweb.com/eric/tools/css/reset/
http://html5doctor.com/html-5-reset-stylesheet/
Hi, I am using the Highcharts library for drawing charts, however I came across an issue with the yAxis in Internet Explorer.
How can be yAxis text displayed correctly rotated in IE8 and IE7 ?
I have the same problem and I figured out that this problem is caused by ie8 emulator. So if you use a native ie8(ie8 from windows xp), will work without problem. On highcharts code there is an method to create css properties, and on this, highcharts create the property for each browser. if ie -ms-transform, if mozilla moz-transform, if web-kit ...
But for browser earlier than ie9 css3 rotate is not supported, so there is a matrix rotate, and this guy(progid:DXImageTransform.Microsoft.Matrix), dont works on ie8- emulator.
Try to run your code on winxp native ie8 and will work.
;D
Based on you're description of the issue, I believe this will help. Note the only workaround is to apply a background color to the label.
https://github.com/highslide-software/highcharts.com/issues/663
Consider the following snippet of code:
<text style="text-decoration:underline;"> Underline </text>
It renders properly for me in both the latest version of Chrome & Safari; however, it fails in the latest version of Firefox.
Question:
if text-decoration not part of the SVG standard?
or
does Firefox not support the entirety of SVG?
and lastly:
how do I get underline / strike through / over line in firefox SVG text given the above?
Thanks!
EDIT
Hmm, does https://bugzilla.mozilla.org/show_bug.cgi?id=317196 confirm that Firefox, in 2012, does not support SVG underline? :-)
The bug you linked to is it.
And no one supports "the entirety of SVG" (at least of SVG 1.1). Chances are, no one ever will.