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")
Related
I've got big problem with SVG smoothness on IE 11 (works perfectly on Chrome).
It should work like real-time timeline. SVG element is dynamically increasing it's height, events are shown in it's time and goes down all time. The problem is that moving elements by 1px is visible and looks bad.
On Chrome I resolved this problem by adding transform: rotate(360deg) (now also I've got scale()) which enabled antialiasing for these elements, and now it's working smoothly there.
Animation on IE isn't smooth unfortunately. I tried positioning elements both by x/y and translate(). Position is calculated precisely each time requesting animation frame. It's more visible on raster images included into (or I just think so). I tried using shape-rendering, text-rendering (for text) and image-rendering for these images.
There is simple JSFiddle: http://jsfiddle.net/9ke74mqo/
Has anyone any other idea?
Thanks
If anyone is interested I've just resolved it. The problem is that in IE there isn't any possibility to turn on antialiasing by any svg element property. When I packed everything in <g transform="rotate(360)" /> element everything just works fine.
I am trying to animate lines going from left, right, top and bottom(lines should start from edges of the screen). Animation works fine in IE11 but not in Mozilla and Chrome. Other browsers I haven't tested. I used Adobe Illustrator to draw. http://codepen.io/Ljanmi/pen/WbyLWv
In Chrome and Mozilla(IE11 is fine and acts normal) if in Illustrator I set Object>Artboards>Fit To Artwork Bounds(minimizing Artboard size which I usually do when create or edit SVG) I get this result(even worse) - http://codepen.io/Ljanmi/pen/yyqVqz
I spent hours and hours trying to figure out on my own without success. I started topics on GSAP forum and CSS tricks forum(stackoverflow.com is limiting me to post only 2 links as a newcomer).
I used GSAP JS library for animating(generally very happy with GSAP) but animation behaves the same if I use CSS3 to animate. I concluded that it is not related to GSAP(viewbox size property seems to have little bit of effect here) , more likely to be related to SVG structure itself or browser compatibility or both. So I guess there must be some work around to make it work like I would like to. I most likely lack some SVG/HTML/CSS3 knowledge since I am not very experienced but trying to learn as much as I can. Thanks everybody for reading.
Add svg { overflow: visible } and it should work the same in all browsers (longer explanation below). If you want to see why the lines get clipped, add borders to the svg element.
Another way is to make sure the size of the svg matches what you want, e.g by using css.
All browsers except IE implemented hidden as the initial value for the overflow property for the <svg> element, as called for by the SVG 1.1 spec. SVG 2 has changed this for (outermost) inline svg elements, such that it requires what IE11 is currently doing. It will take some time before that gets changed in all browsers, so for now just add the overflow: visible rule and it should work correctly in all browsers.
I had some trouble with browsers still not showing the overflowed content for SVGs and found that this finally got past it:
svg:not(:root) {
overflow: visible !important;
}
I'm new to animating SVGs & I've come across a problem that only seems to happen in Firefox. I've created a animation here - http://codepen.io/iamali/pen/txvpo - of a sky scene. The sun should rotate & fade in & out.
It works fine in Chrome, but for some reason it appears to ignore the transform-origin value in Firefox and the sun goes AWOL. Does anyone know of such an issue in Firefox? Or could it be anything else? I've tried Google all sorts of terms but there doesn't seem to be much out there on it.
Thanks!
transform-origin with percentage units works from Firefox 43 onwards.
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%?