I have transition animations on an SVG and everything is working fine except for the fill colors of .logo-square and .logo-bg. The color just changes without any pretty transitions. I definitely have it listed as a transitio, and it works in my pen.
Can someone lend a hand as to what I’m maybe missing?
Turns out the issue was how Safari renders and behaves with certain CSS properties in regards to SVG. I've since abandoned this way in favor of a easier image hover transition.
Related
I'm using CSS3 PIE to do border-radius, drop shadow and transparency effects to make the transparent area around the main of the page. I'm trying to make it look like this:
http://www.palosverdes.com/rpv/re-design/JANUARY-2012/C-10.html
Here's my current version:
http://www.palosverdes.com/rpv2012/indexforie7.cfm
This renders the effects I want in the modern browsers, but in IE7 the drop shadow seems to be filling the area that should be transparent. Here's a screenshot:
imgur.com/lD0JG (I still can only post two hyperlinks, sorry)
Any ideas what might be causing the problem?
It turns out that css3pie doesn't support drop-shadow on items that are not opaque (it shows through). Here's the relevant link: css3pie.com/documentation/supported-css3-features/#box-shadow As far as I can tell, this problem can only be resolved in ie7/8 by using a png-based drop shadow with some css or adding the drop-shadow as part of the background-image for the div.
I'm hunting some very odd rendering issues in IE9 in windows 7. I'm using the microsoft "filter" method wherever there are gradients, it's HTML5, and everything is in standards mode.
Please note, as there has been some confusion: This is happening everywhere there are rounded corners, including in situations where there are no gradients, and even no background color at all. The specific issue can be seen in the screenshots below as gaps in the border and color getting repeated on the x-axis, INSIDE the element.
As far as I can tell, I have set up everything correctly, and of course it all renders just fine in firefox and webkit browsers.
Has anyone ever seen this? I'm chasing my tail and googling turned up squat.
Input box:
DIV with gradient background:
Edit:
The twitter-bootstrap link provided below exhibits exactly the same issues on all their example elements. Smarter people than me are working on that project, so I'm racking this up as un-solvable with CSS alone. Feel free to close.
thats a known bug in IE9 and theres no really easy solution* to get rid of this. the easiest ways would be:
use a background-image containing the gradient instead of a gradient for IE < 10
use a plain background-color instead of a gradient for IE < 10
twitter bootstarp, for example has to deal with this, too. they've chosen to use a plain background-color for their buttons as you can read here:
In IE9, we drop the gradient on all buttons in favor of rounded
corners as IE9 doesn't crop background gradients to the corners.
*ugly svg-for-ie-solution: http://abouthalf.com/2010/10/25/internet-explorer-9-gradients-with-rounded-corners/
IE Filters and rounded corners don't play nicely together. You're going to have to choose between a solid background colour or square corners for IE. Vendor prefixed gradients are going to be supported in IE10, so there is that at least.
Twitter make note of this on the Bootstrap site, saying:
"In IE9, we drop the gradient on all buttons in favor of rounded corners as IE9 doesn't crop background gradients to the corners."
I have a relatively complex button that I'm styling with CSS3, it looks and behaves as I intended apart from the transitions are not working. It should fade on hover etc but it's just not working, tested in moz opera and chrome, no luck.
Here's a link to a fiddle http://jsfiddle.net/dsyne/DpsuN/1/
Any help would be appreciated, i've tried many different things. Re-ordering the stack for instance. I'm not sure if the ordering is important with transitions ?
edit:wrong link sorry
Gradients don't support transitions directly yet. You should define your background colors then use a pure alpha gradient that is the same across states to add shading.
Use id to specify transition property instead of class. Worked for me!
I'm creating a draggable/resizable menu with all the neccesary links to control the website, a CMS-bar kind of. I'm using some png's to create the background, set with some transparency.
It works great in FF, but in IE my png's get transformed after I drag my menu around:
Screenshots:
http://img.photobucket.com/albums/v739/Alienna/falcon/drag.png
Also, that big empty space? That's a log-out button(div with background-image and a-element), of wich only the :hover status seems to work, and only before dragging ...
Any fixes for this? I thought IE's png problems were gone after IE6(tested this ie IE7/8) ...
I'm not 100% sure, but I assume this is the old "PNGs with alpha transparency in DIVs with alpha transparency" bug that is present in all IEs including 8. See here for more info.
In short, IE has difficulties with alpha transparencies in PNGs when those are in containers that themselves have an opacity different from 1. When you drag the element, its opacity changes, and the bug comes into play.
Convert your draggable image to 8 bit, It works for me..
For things like menubars and headers, a background color is nice.
But a background color that gracefully transitions from say Blue to White is even nicer.
I know this can be done by making a 1-pixel wide, X-pixel tall image file containing the desired fade and repeating it across the div, but does CSS have native support to just define colors and be done with it?
Can any other language handle this?
With CSS3, you can do that. However, CSS3 is not widely supported through browsers, so only the most recent of browsers (and not even all of them) will be able to display the gradient. Unless you're only interested in working with those browsers that can do it, you're going to have to stick with the 1px background image.
http://www.quirksmode.org/css/contents.html
http://www.w3.org/Style/CSS/current-work#CSS3
You mean a gradient?
Webkit browsers(Chrome and Safari), and apparently FF 3.6 now support CSS gradients:
see this link
According to the article, even IE has some proprietory CSS gradient support, I don't know how well that works though. You should always have a fallback to solid color though.