Good afternoon,
I'm creating a SVG-based program and I'm having cross-browser problems with SVG textpath when opening with safari and mac-firefox. It works great with chrome, windows-firefox and IE.
take a look here:
http://codware.com/test.svg
screenshots:
Good:
http://codware.com/chrome-svg.png
Bad:
http://codware.com/mac-firefox-svg.png
http://codware.com/safari-svg.png
Any ideas? Thanks
The firefox issue was Fixed changing the initial PATH to a curve, it don't work with a rect path
The Safari issue remains, that can be checked here:
http://codware.com/logochrome/
1- Click at "Earth"
2- At sidebar click at "Curved Text"
Related
What does it mean when there is "faint text" in the Firefox dev tools inspector, like the .tab-pane divs in the .project_tab_content area:
This corresponds to some Bootstrap stuff that is working everywhere except Firefox, so I'm a little suspicious... Thanks!
Faded elements mean they are not visible. This can be due to some CSS like display: none or their dimensions being 0x0. See also the hint at MDN regarding this.
I am working on this site and deiced to created a slider (using some source code I found form the internet) which can be seen here http://gpsfac.co.uk/
It seems to work fine in chrome, safari etc but in firefox it seems to hide all the links at the bottom and enlarge the images? Anyone know why this may be and a quick fix?...
Thank you
I found out the answer all I Need to do was state the width % at 100% in the style css...
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.
My wife's blog (Japanese) has an issue with the styling of the comment form.
It looks fine on Windows Firefox and other browsers when you hover over the submit button (dark red) at the bottom. On Firefox for Macs, the hover effect is like 1/2 of the button gets the correct coloring while the bottom half. It looks fine in Mac Safari. Do I have some of my color properties wrong?
http://www.miwacle.com/?p=20246
try looking in here
https://developer.mozilla.org/en/CSS_Reference/Mozilla_Extensions
this will give you the list of specific css for firefox.
hope this helps.
I have been trying to play a bit with the CSS3 and build a Netscape logo purely out of CSS3 for training.
Here is the link:
http://alonbt.com/css3/netscape/
The thing is: In Firefox all looks well, but in Chrome something goes wrong. I assume this is the overflow:hidden I have - in Firefox it works but Chrome doesn't seem to render it well.
Any suggestions bout what might be the problem?
I've detailed this issue here: http://tech.bluesmoon.info/2011/04/overflowhidden-border-radius-and.html
In particular, you're being hit by https://bugs.webkit.org/show_bug.cgi?id=50072
The issue shows up in Safari too.
You can workaround this problem if you don't use relative positioning. Try getting rid of the 'position: absolute' CSS property and use negative margins instead (e.g. in your case, something like: 'margin: -204px 0 0 -475px;').
Pay attention however that you'll have to compensate somehow on item ordering (you no longer have control over z-index but you need it).
I had the same problem in Chrome on a Windows computer, a img in a div, with overflow:hidden on the div. On a Mac everything showed fine, but Windows Chrome ignored the overflow:hidden. My solution: -webkit-transform:scale(1); on the img (the child).