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.
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 am trying to make a combobox in html and CSS, in which every item is on a separate line, and each line lights up blue when you mouse over it, like on Google. That much is easy. I have a div with links(a) in, and each link uses display:block in CSS to fill the whole div. Then I added a dotted outline to theone being hovered over, and that's where things went strange.
Here's the jsFiddle.
You can see it working if you hover over the top link, but the others don't seem to show the outline... The second one down is just visible at the bottom, but the others aren't there at all.
Any help would be appreciated.
EDIT: I'm in IE8 on Windows XP
http://www.w3schools.com/cssref/pr_outline.asp
"Note: IE8 supports the outline property only if a !DOCTYPE is specified."
If you're testing this in IE9, using Compatibility Mode, make sure that your Document Mode matches Internet Explorer 8 standards, not Quirks. If I switch mine to Quirks mode, the outline disappears.
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/.
I'm using CSS3PIE to apply some rounded corners to elements in Internet Explorer that will get them by stylesheet in other browsers. I've run into some issues with it though.
In IE8, I discovered that any element that had the PIE behaviour would behave strangely. The container would jump a few pixels to the right, but the content would stay in its original position, giving the appearance that the content had all shifted left relative to its container. This would be especially problematic on elements with no or small amounts of padding.
I was able to hack my way around the problem in IE8 by using X-UA-Compatible, but I'd rather avoid this solution if at all possible. I don't have access to IE9 for testing but my understanding hacks like PIE aren't necessary and it would be wasteful to force a compatibility mode in a browser that doesn't need it.
I have worse issues in IE6, with the PIE layout breaking down completely on a list that is set up to use display:inline; zoom:1; list items (to simulate inline-block, which works in IE8 and the other browsers). Here the borders of the list items get rendered in completely the wrong place.
So ideally, I'd like to have PIE work properly in IE6, and in IE8 without having to resort to compatibility mode. As far as IE6 goes, a graceful fallback where PIE is just not applied will do. IE7 is the only browser where the page displays as intended.
I can't provide an example page just at the moment unfortunately, I can add one later though.
Follow up:
Here are some screen grabs made with IE Tester. I'm hoping they will make things a little more clear for everybody. As you can see, IE7 is fine. However, in IE8, the containers are offset to the left relative to their content, and in IE6 the list elements (with the rounded 1 pixel border) are a complete mess!
Full size versions for IE8, IE7 and IE6 are also available
Followup 2
Here's a link to a demo page.
As other designers are working on the stylesheets and other parts of the design I can't promise it will remain fully reflective for very long, but hopefully it will for long enough to solve the problem. (Yes, I'm aware there's JS errors in IE6, those aren't my problem).
Example page
i prefer using http://www.curvycorners.net/
I was experiencing a similar issue with IE8. The elements PIE was applied to would first display 10-20px lower, then jump up to the proper position.
Applying the rule "display: inline" to the element seemed to stop the issue.
"Position: relative;" and "zoom: 1" on the element or parent element seemed to have no effect.
It's a bit weird. Once the rule "display: inline" is applied, the issue dissappears on
refresh. But if you remove the rule, it still looks okay on refresh, until you
close and reopen the browser window - then the jumping reappears.
Hope that helps someone.
Try adding
position:relative;
z-index: 0;
as suggested here http://css3pie.com/forum/viewtopic.php?f=3&t=10
This question is similar to the one posted here: CSS3 PIE - Giving IE border-radius support not working?
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.