I am using flot to display a bar graph. Due to the long label of x-axis, I use a js plug-in which named jquery.flot.tickrotor.js.
The label looks fine on most computers. But on some computers, the letters in the label are kind of messed up and the font looks strange.
I really want to post the pic to show the display but I don't have enough reputation to do so.
Does anyone know what may cause this problem?
The labels are probably rotated using CSS transforms. Some browsers - mainly IE 7 & 8 - do a poor job of rendering the rotated labels.
If the plugin supports rendering text to canvas directly, enabling that should fix the problem. Otherwise there's nothing you can do about it. Since those browsers are disappearing from the market due to their age, the problem will eventually just disappear.
Related
I encountered a weird Firefox's behaviour. It renders SVG images cutting parts of them or not displaying them at all, but only certain of images, not all of them. Chrome and IE are displaying them properly. Here is a link to the website I put said images on:
funjo.pl
Images which are not being displayed properly are logo in top menu bar and big blue logo with transparency on the big very top banner. The funny thing is that two icons a bit down on the same page (three rolls and woman's legs), which are also SVGs are being displayed properly. Could someone please tell me what's going on? I suppose there is something wrong with SVG image code itself but I can't detect what exactly.
I'm not pasting whole images' code beacuse it's too much of it. You can download these images from http://funjo.pl/media/2016/06/logo.svg and http://funjo.pl/media/2016/06/logo2.svg.
PS: If you really want me very badly to paste the whole code let me know.
PS2: I created all of SVGs on the website using Corel X7, if this information helps in anything.
PS3: I'm using the newest FF v 46.0.1.
Actually I've found a solution myself, it helped perfectly but required few more steps after exporting SVG in Corel X7 (as I mentioned in my post above there were two images, one of them with transparency). So here are the steps I made to make it being displayed properly in FF (a bit trial and error procedure but works):
I exported both SVGs again removing transparency from the one which was originally transparent, so no transparency at all in both SVG images. The one used as logo in menu bar contained all the elements grouped (logo and text were both separate but grouped), I ungrouped those elements and made them as one.
I removed height and width attributes from both SVGs.
I added preserveAspectRatio="none" attribute so I could manage width and height of the image separately, just like raster images (this CSS Tricks article helps a lot with understanting the whole resizing process).
I used SVG Optimiser tool to remove all the unnecessary bits from my images and to slim them down a little.
I downloaded optimised SVGs from above mentioned tool's website, uploaded them to my website's FTP.
I added height:(some)px and width:auto attributes in CSS
I added transparency for the one which was supposed to be transparent via CSS - opacity:0.7 in this case.
Refreshed the website and voilà, it works like a charm. Hope it will help someone with the similar problem as mine.
EDIT
Here are images to compare, working one and not working one.
PS: After some more trials and errors I found out that changing standard text to curves in Corel X7 makes FF render the SVG image properly without above steps, but it doesn't change the fact that it worked properly in Chrome and IE anyway even if the text wasn't changed to curves before export. Plus FF didn't display SVG exported with transparency at all and Chrome and IE did.
You could open a working and failing SVG file into your text editor and find differences in the generated HTML.
I guess there is a difference the way you save it or how the vectors and layers are put. Maybe some transparent layer on top off the image renders strange?
Applying a width of 300px or above gave me the correct results as in chrome and IE.
So just give a width as below and probably you can adjust the width as per your requirement.
Hope it helps.
<img style="width: 300px;" src="http://funjo.pl/media/2016/06/logo.svg" alt="Funjo">
I solved it by removing commas , by spaces
I am working with SVG the first time and came across this problem:
I am using some SVGs for icons and everything works fine - except for one icon that renders incorrectly in Firefox on Windows. Firefox on OS X however renders it just fine.
Here is an anonymized version of the header I am placing SVG icons in:
http://files.uiux.de/140618_header/
That problem persists regardless if I use the Sprite utilized in the above example or if I use separate files for each icon.
Here are two screenshots of the render-issue I am experiencing. The problem is that little 'dent' on the lower end of that earphone:
We've saved those SVGs in Illustrator and used SVG 1.1 as export-setting.
Can someone point out what the problem seems to be here?
I'm not seeing that error in the sample header when I look at it with my version of FF (30).
It looks to me as if the artifact/'dent' you are seeing is caused by the left-most column of pixels of the envelope icon next to the phone in the sprite sheet. You can tell if you zoom up the image.
What I do, to make sure things like this don't happen, is to not put icons hard up next to each other in the spritesheet. Leave a few pixels gap between them.
I have this website: hrrubin.dk
In chrome, you will notice that all images that have image switch on mouseover, are positioned wrong. This has flaw happened only recently. Maybe a cause of some changes to the chrome code.
Is the solution to make a chrome hack, so not to disturb the the rest of the browsers?
I think there's a better way to do it. You put all of those images in a sprite, and apply them as a background image to the a tag. Give distinct IDs to each a tag. Then use background positions to position them and to change them on hover. That's how its generally done.
I'm getting strange problem with pie.htc and IE8. I have many elements on page that has rounded corners but pie works only for one element. My CSS is correct - I mean selectors are correctly assigned to pie behavior.
What elese could be wrong?
I have some experience using css3 pie and they have not been great. Here are the fixes i have used:
The elements that you are applying the behavior library too need to be position: relative for a start, so check that first. It may fix it.
If you want it to work in IE6 and 7 you need to add zoom: 1. I know you said you were using IE8 but my customers have said that in the past and it has been in compatibility mode, so always best to add that setting.
CSS 3 Pie does not support browser zooming either on background images so check that you are viewing the website in the 100% view and no other.
Hope that has helped. If you could post a jsfiddle then I could try and help further. If not check the css3pie known issues http://css3pie.com/documentation/known-issues/
Found a solution. Problem was that for these elements was used background with filter. Also css3pie sets background for these elements. After removing this filter everything works fine.
Is there a good way to detect if SVG animation is available, and then adjust the DOM appropriately?
I'm using animateMotion to animate the motion of a g containing images. This only works in Mozilla; even worse, having the animateMotion unstarted leaves the images in a different position in both Mozilla and WebKit (but not the same place in each!).
It seems I need a way to adjust the properties on the g and images to deal with each scenario, and to add the animateMotion tag only if it would work. Any suggestions?
Modernizr detects only high level feature existence and trusts the browser not to lie. Desktop Safari, for example, has a big "Yes" for SMIL from Modernizr. But SMIL is only partly implemented in pretty much every browser (even Firefox 4!), and you have to test each individual attribute animation to figure out exactly which one is working or not.
For example, you can't animate the startOffset for text on a path animation in Desktop Safari using SMIL. There is no library that detects feature existence for things like this.
IMHO, where they exist you should use CSS transforms/animations for general purpose animation on everything other than IE. For IE, use Javascript (or Canvas) animations.
(BTW, animateTransform on Chrome is broken - it miscalculates the translations)
I just had this issue with a Samsung phone running Android 4.2.2. It would report true for all three of these: Modernizr.svg, Modernizr.svgclippaths, Modernizr.smil but no animation and the clip-paths where messed up. It looked like only one element could have a clip-path. Anyway, we ended with this not-so-great resolution:
isAndroid = /Android/.test( navigator.userAgent );
Sorry, android users, you'll only see the backup image. This is a horrible fix but it was only for a simple logo animation so...
Modernizr detects support for SVG animation (SMIL).
Without the complete example it's impossible to say for sure what's causing the differences.