-webkit-transition-property: translate
-webkit-transform:translate(-320px, 0px);
I have those lines in my css file but this doesn't work in chrome: if I fire up chrome developer tools and inspect css for elements whose style contains those lines i see an hazard icon that tells 'invalid property value'
what happens? is this obsolete?
You need to use the exact css style in the value of transition-property. So what you would want is:
-webkit-transition-property: -webkit-transform
Whatever the value is needs to be a legit CSS property (exactly). Lemme know if this works! Seems good to me in Chrome.
Related
I have a Ul tag on hover of it, I display a div using css.
Now i want that div tag will 1st fadein or any other effect like animate etc.
I know it can be done easily by using jQuery, but want to know can i achieve this using Html5,css3,css
Here JsFiddle
Fading in http://jsfiddle.net/thebabydino/Cedue/7/
There was never anything like -webkit-opacity or -moz-opacity
If you want to transition the opacity, then either write
transition: opacity 1s
or
transition: 1s
From what I can tell, removing the display: none; and display: block; lines from your code enables animation:
http://jsfiddle.net/Cedue/31/
(That is a copy of your original fiddle with only the display: lines removed.) However, this raises the issue that you can access, highlight, and even hover the text when it's hidden; if you do not wish to have that behavior you might wish to look into another means of hiding it until the correct area is hovered, such as shifting it with margins.
As Ana has mentioned, as well, if you wish to animate the entire fade you should use opacity as your transition parameter (e.g.: transition: opacity 1s ease;, with the additional lines for separate browser support). If you use background as the transition property as you do in your example, only the background fades and the text appears instantly.
EDIT: due to my own curiosity I tested this under Chrome and Firefox, each for both Windows and Mac, and can confirm that removing the display lines caused the animation to work on all of them.
Check this site, it uses css and javascript.
Pure CSS implementation here.
You should look into CSS3 transitions http://www.alistapart.com/articles/understanding-css3-transitions/
I have this strange behaviour in IE9 where, when I change the border-color of a <input> on user-input (:hover or :focus), the layout will get crashed
I wanted to have a form where the labels are on the left with a min-height and if the label is wider, then the input field should go in the next row. This works good for me (not in this fiddle for all Firefox though, but on my development, but that's not the problem here)
I tested it in IE9 and then some input fields will jump to the right by the margin-left value n mouse hover.
I broke it down, that I can make this unhappen, if I lower the margin-bottom of the label (here from 5px to 4px), but the error shouldn't come up in the first-place
I can also have no error, if I do not change the border-color. Strange!
Here is an example:
http://jsfiddle.net/HerrSerker/9ktvX/ (Check in IE9)
Is this a known bug in IE9? Should I write to Microsoft?
edit
I updated the fiddle.
If I change the border-color via jQuery the bug does not appear.
If you change the font size in the input field to px, it fixes it... Seems to be be buggy due to the adaptive units?
http://jsfiddle.net/9ktvX/3/
input {
...
font-size: 13px;
...
}
Try to avoid "float" property. You can get the same layout with display:inline-block;
I am using jquery.reveals.js plugin.
the following colors specified in css
#fff
#000
are being interpreted differently on different browsers.
Getting the following output on firefox,chrome,and IE 9 ( and above)
however I am getting some unexpected result with IE8
I guess above problem is because the color specified in css in only 3 digits i.e. #fff and #000.
How can I fix this for IE8
Well it looks like the IE8 one is correct, and the modern browsers are interpreting it to what looks like #000; but with some transparency, is there a setting of opacity: 0.5; somewhere that IE is ignoring and good browsers are doing??
It's probably because before IE9, IE's png handling was horribly flawed. If you look into the plugin's asset folder you will find a modal-gloss.png. Now when you opacity animate a sem-transparent in IE before IE9 it will loose its transparency.
Try disabling animation with
$(...).reveal({ animation: 'none'});
the colors are displaying properly. I think the problem is with opacity.
Here you can read about CSS Transparency Settings for All Browsers.
Specify the color in six characters, or perhaps better yet specify the color as an rgba value.
Stick to using the standard as intended without leaving guesswork for the browser. Meaning define in hex as #RRGGBB not #RGB. You can switch color value schemes (like to RGB) but that should not be your issue.
This link shows you examples of each color value scheme and talks about browser compatibility:
http://www.w3schools.com/cssref/css_colors_legal.asp
Try rgba(0,0,0,0.5).
More about RGBA
I have an unordered list with image links and when you hover over them they fade out a little bit and this shows all good in every browser except IE, of course. At first I thought it was just a png bug but after applying both of those fixes it still doesn't work. The page is at:
The page.
If anyone knows what is going on please let me know as I am completely stumped now. Thanks
It appears to work in IE7 and IE9, but not IE8. Interested, never seen that before.
Anyway, you can fix the problem by using a different method. Instead of using a list, just have your images (with links) inside the containing <div>, then apply a style to the links such that they have display: inline-block; - this will allow you to align them vertically with each other (vertical-align: middle;) and set their width if you want.
The opacity fade is being achieved by styles that IE doesn't support
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
It works in IE9 so first guess is you are using some css or javascript that isn't supported for earlier versions. You need to post the code so we can give you better guidance on how to resolve this.
http://jsfiddle.net/danielcgold/SYgzJ/
When you click on the input then go on blur, artifacts are left on the screen in Chrome 15. I first noticed this issue on a site i've been developing so I eliminated everything but just the input field and a button. When I remove the button, the transition happens just fine. Any ideas?
Add this CSS to your input field:
input {
-webkit-transform: translate3d(0,0,0)
}
This will force Chrome to use your GPU to do all the rendering which will solve the artifacts problem and make your animations smother.
This is a bug in Chrome's rendering of CSS transitions. But you can workaround it by forcing element "refresh" operation. Please note that you need to refresh not the input element, but it's parent, so the following code will help you:
$(document).ready(function(){
$('#test').blur(function(){
$(this).parent().addClass('repaint');
});
$('#test').focus(function(){
$(this).parent().removeClass('repaint');
});
});
And repaint class should have something related to parent's view, for example different color:
.repaint {
color: red;
}
But you may replace color with visibility or other view-related (but not important/visible for parent) attribute.
Here is jsfiddle to demonstrate the workaround
I had a similar problem with box shadow artifacts in Safari, and found adding -webkit-transform:scale(1); to the focus rule fixed the problem.
See http://jsfiddle.net/SYgzJ/48/ – it should work fine now.
As Cesar said, -webkit-transform: translate3d(0,0,0); will fix it, but it can affect text rendering too.