Firefox messing with SVG coordinates [duplicate] - javascript

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.

Related

HTML5 Canvas TextBaseline Top looks different in Firefox and chrome

In canvas, while setting textBaseline property to 'top', its rendering differently in chrome and firefox. In chrome, there is a gap between line and the text where as there is no gap in firefox.
Kindly refer this to view in your browser, any help would be thankful.
I also checked similar issue reported long-back. Is there any work-around in firefox to get it work fine?
I agree with the OP that this is an issue and it's peculiar to Firefox. Increasingly though, it seems that Firefox has adjusted the vertical offset overtime. It was once once about 4 pixels, then 3. Now, it is almost imperceptible. So, I agree with #Kaiido above. Use/set *object*.textBaseline="alphabetic"; I believe that this is consistent across browsers.

IE 11 SVG animation smoothness

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.

Unwanted black outline in Raphael.js

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 legend pile up

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.

Internet Explorer 7 Google Map Rendering Problem

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%?

Categories

Resources