When scaling an SVG element that contains text the text fails to redraw correctly. This problem only seems to occur in Safari (tested in Safari 5.1.7) on the desktop, it renders correctly on the iPad, and in the other major browsers, including the developer preview of Safari 6
See the following jsfiddle for a demonstration of the problem.
http://jsfiddle.net/aBW25/
Viewers that experience the problem will not see the white text in the center of the red square, or the text will be rendered incorrectly.
Run the demo in a browser such as Chrome or Firefox to see the correct output.
Has anyone else experienced this problem or know of a way to get around it?
Thanks
Related
I work with angular-calendar-scheduler and the events is displayed properly in chrome and brave browser. But in Firefox, the height is not displayed correctly.
I don't know if this is a big issue or something about Firefox's settings, so thanks for the help.
Also, a small issue is that in the browser that it work (like chrome), when I change the hours, I need to hover, and then the height it displayed. it not displayed without hover the event.
Here are 2 pic from chrome and Firefox.
Image from chrome, height displayed correctly
Image from firefox, height not displayed correctly
I'm attempting to create an animated menu bar using raphael.js. It works fine in Firefox but in Chromium a black outline appears around the graphic. View this jsFiddle in Chrome.
As the graphic moves it also seems to leave behind traces of this black outline as shown in the image below. I've tried setting the"stroke-width" attribute to 0 but this doesn't seem to have any effect.
Any help on the matter would be much appreciated.
I've run into this problem and it's present in Chrome 18 and 19. As Chrome 20 is just a few days old, many users will still have previous versions installed, so it's still worth fixing it.
In Raphael just set your stroke: none or plain svg element.setAttribute("stroke", "none")
Google charts does automatic label positioning. However under chrome everything goes ok, but under firefox and IE this is the result: http://i.stack.imgur.com/ftXgF.png
As anyone gone through this or have any idea why this happens? It's a very random behaviour sometimes it displays properlly other times it doesn't.
The html element where the graphic is going to be displayed must be visible at drawing time.
That's the solution. Otherwise there is a bug that in browsers other than chrome it cluters up the legends.
Hi I'm having some trouble with IE7 when doing a map.
I've made an xml and ajaxed it to grab points based on where the user is on the map.
It works well, and in FF, IE8 no problems when they click the points. On IE7 it firstly misses the cross at the top right, has some problems with the border (fixed that with some margin) and more importantly cuts out an portion of the image which I can't figure out.
I've attatched an image and what you see there is basically an a tag with a background image.
I've taken the title out as I thought that might cause it. Basically I'm stumpped any ideas.
Thanks
Richard
There seems to be a bug in Internet Explorer which has to do with how transparent PNGs are scaled when using the Zooming feature of the browser. It's difficult to reproduce because it's a local browser setting.
It happens even in maps.google.com. See the example below at 125% zoom, using Internet Explorer 8:
Is your zoom set to anything other than 100%?
I am building a website - http://www.efficaxdevelopment.com
As you can see when you load the page(in IE) the text on the page that isn't an image or the menu looks terrible, while in FF and Chrome the text looks fine.
you can view the source on the page and the css is here http://www.efficaxdevelopment.com/styles/mainstyle.css
Also, the sliding bar over the menu appears a few pixels left of where it appears in FF and IE. Any ideas?
The fix is to add a background color to the elements that contain the text.
Could be similar to jQuery fadeIn leaves text not anti-aliased in IE7
Seems there is a known bug in IE when using jQuery fades.
http://malsup.com/jquery/cycle/cleartype.html