Take a look at this: http://jsfiddle.net/5fLtb/3/
When you hover over it in webkit browsers (Chrome/Safari), it seems to glitch and go light blue then to the proper colour.
In Gecko browsers (Firefox), it doesn't fade in at all.
Could someone tell me if this is a bug or if there's a way around it/
I think it's a bit silly to load a whole new svg image when all you really need to do is to change the color of it.
For something this small you could just use inline svg, see e.g http://jsfiddle.net/zuWGy/1/.
Related
I have converted a badge/image from PNG to SVG in order to be able to re-use the asset in various sizes etc.
The problem is that depending on the specific webpage i'm embedding the SVG on, it either looks super crisp (as intended) or looks bad with some sort of anti-aliasing gone horribly wrong.
Even on the pages where the SVG looks crisp after load, I only have to scroll the page a bit until it looks horrible as well.
Please look at the screenshots below to see the exact difference on the BADGE (SVG):
It seems the browser only messes with the SVG right where the SVG meets the image behind it. The SVG is only slightly transparent in the gray center, so that should not be the cause of it.
I have tested in Chrome, Edge, Safari which all do the same thing.
Does anybody know what might be the cause of this?
I found a fix to what clearly seems to be a somehow undiscovered big bug in all modern browsers in regards to handling SVG through CSS as a background on an element overlapping another element with background/image.
The fix for my case was simply adding a background-color to the element. Since the element is completely round I can simply make a border-radius as well, so the background will never appear.
If the element however was not a complete round circle, this would not be a workable fix.
I'm working on a website with bootstrap which is basically made of an orange background and some transparent black containers.
http://i.stack.imgur.com/n9G5O.png
As you can see, the font displayed in the transparent boxes looks bad. I'm using Tahoma, but this happens with every font i try.
Is there any way to improve such text?
Thanks in advance!
Tahoma is a Windows-Font, so it will probably use Arial on other Browsers.
It also seems like the screenshot you provided came from Internet Explorer, which has a very bad render engine for text. (try chrome/firefox/safari)
I also read somewhere that you could try enabling ClearType in the Windows-Settings, but there is no way to enforce that from the browser level.
You could also have javascript cufon change every character into an image/canvas and enforce it that way, but that will suck performance and might not be the best solution either.
Usually you will end up using images (png) as menu buttons, if you want to support IE.
I've an issue whereby if you are to hover upon an <li> element that has been skewed (from a CSS3 transform) and a shadow applied to it, the shadow it generates will then be rendered incorrectly. It's probably better to see the issue first-hand here - http://jsfiddle.net/mabbage/BLD5Z/1/
It seems this issue is confined to web-kit browsers (Chrome and Safari). Does anyone know of a workaround to this?
One thing I have discovered when playing around with it is if you remove the shadow of the nav object, then this whole issue disappears (however, I'd like a shadow behind the whole list).
The only solution I could find was to use PNG images to style the <li> elements and the shadow behind it. I'm putting this problem down as a CSS3 bug in webkit browsers.
I've fixed image size. And I want to achieve rounded corners through html/css.
Options I'm thinking about is to overlay image with four corner png. Using img:after and content. But unfortunately img:after is purely supported across browsers, let alone compatibility with IE 6.7.
Is there any simple clean way to achieve this?
In theory I could also create div with corner background and make it go absolute over the image... but that would break save as functionality.......
any ideas?
Well, there's always CSS3 rounded corners border radius which has very good support in every modern browser, then the CSS3PIE polyfill for older versions of IE.
If you can live with the fact that browsers that don't support border-radius will show plain old square images, you could use this jQuery script to automatically wrap your images in div's and give them corners:
http://www.smoothdivscroll.com/roundedimagecorners/
(View the source to get the js and see how it's used)
Here's an article that I've written that explains the background to this script:
http://www.swedishfika.com/2010/03/19/rounded-corners-on-images-with-css3-2/
Regards,
Thomas
To make border round in IE there is little work around for that. Please have a look at this link
I cannot make the image a background image to a div and round the div's corners because the image is resized, and as far as I know, you cannot resize a background image.
What are my options, if any? Open to all suggestions including wrapper divs and corner images.
Also, if it cannot be done in IE but there's a solution for Firefox, that's just fine with me.
If you're re-using the image and it's varying in size, you should be chopping up your corners accordingly if possible. I had a quick look for you, and here's a site that shows you how to achieve it using sprites. This increases your markup because you need to use positioned divs to position each section of the box.
Of course, recent versions of Firefox, Safari, Opera and Chrome support border-radius which allows you to create rounded corners without using images. IE9 will support this too, when it gets released.
I've seen sites that use border-radius and just leave it at that, so the borders aren't rounded in browsers that don't support it.
If you're interested in creating corners in IE then this may be of use - http://css3pie.com/
The jQuery corner plugin is what I use. You can do:
$('#div').corner('10px');
I am not sure, but maybe you can achieve what you want by using svg backgrounds. This will not work in IE.