I'm using Bootstrap but want to disable the blue glow around an input box when it gets focus.
I've tried
transition: border-color 0s, box-shadow 0s;
It works fine on Firefox, IE, but Chrome just ignores this and keeps the animation.
Could anyone let me know how to disable that transition on Chrome, please?
TVMIA,
Adam.
This has been answered before, try:
input:focus {outline:0;}
Related
I am trying to use css transition for filter and am getting some weird results in Safari, but works as expected in chrome. My CSS where I set the initial filter and transition (working codepen link below):
transform: translate3d(-50%,-50%,0) scale(1);
filter: blur(0px) contrast(1.1) sepia(0) saturate(1);
transition: transform 1s ease-in-out 1s, filter 1s ease-in-out 1s;
Safari is applying the filter as soon as the class with different filter atributes is added, but then after the transition delay jumping back to the original state, and animating the transition of adding the filter.
Ive recreated the problem in codpen here. It works fine in Chrome, but has the weird state jumping in Safari. Ive tried adding the -webkit- prefixes to the different css elements and their attributes, but maybe im missing something.
Any help is greatly appreciated.
I have recently come across some odd behaviour with Safari in regards to CSS animations and a failure to update an elements position when the DOM is manipulated. I have taken some GIFs that illustrate this:
In Chrome (http://recordit.co/cCim1IwyMc), when animation-delay is updated in the DOM, the browser will update the element's animation position as you would expect.
In Safari (http://recordit.co/3DRmEdo0FC), when animation-delay is updated in the DOM, the browser fails to update the element's animation position.
This seems like a reflow/repaint issue to me. I also noticed that when you hover over the animated element in Safari's inspector, the blue overlay also fails to keep up with the animation.
Here is the code: http://codepen.io/jabes/pen/pNgRrg
I recently stumbled across a similar problem regarding safari and css3 animations, it seems safari has issues overwriting single animation properties when defining the animation using the shorthand pattern. In my case it was the animation-play-state, that could not be changed for safari, so i had to apply the whole animation string at once instead of simply setting animation-play-state: running.
try:
.animator {
width: calc(100% - 100px);
animation: slide 50s linear 1s forwards; /* animation-delay 1s */
}
The delay goes right after the timing function.
I'm getting a bug using CSS keyframe animation.
When animating the -webkit-transform property, if I add -webkit-animation-play-state: paused; and then remove it, the animation quickly jumps back to the start and then resumes again.
Here is an example of this in action: http://jsfiddle.net/NAjFf/8/
It even happens when toggling the animation state with javascript: http://jsfiddle.net/NAjFf/7/
Is there a workaround for this issue?
Thanks!
It's a bug issue in webkit, everyone affected by it might be interested in Roman Komarov's technique of tricking WebKit into transitions on pseudos via inheritance.
Checkout the below link
pseudos
:)
I've had this CSS for some time, and suddenly I noticed it's not working in new versions of Firfox.
-moz-transition: all .3s, top 0s, left 0s;
So the original idea was opacity & scaling transforms would animate while top and left would not animate. I know using "opacity .3s" will work, but I need my scale transform to work also. I'm also aware of the CSS "zoom" property, but that will not work for my needs.
Basically, I just want this to work and I have no idea why this correct CSS is suddenly broken in Firefox. If anyone has an alternative solution, that would be great.
Ssssup doode,
instead of all put transform. Like this:
-moz-transition: -moz-transform .3s, top 0s, left 0s;
example: http://jsfiddle.net/9J5vc/3/
this is a problem with the lastest versions of Firefox and not your code. I have half a dozen sites that are not properly rendering css in firefox at this time. they were all fine not more than a week ago and no change to the code or codebase was made. the styles still work in other browsers.
Firefox is having issues on thier current release of the browser and I am sure they are all aware of it, but really, if it does not get fixed soon, they will loose even more market share. which would be a shame really.
That is a bug in Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=835007 (similar question: 14533519 and was recently fixed for the Firefox 21 milestone. Until then, you can't use all as part of multiple transitions and have to specify every property separately.
To be fair though, only the most recent W3C draft explicitly states this behaviour; earlier versions were not very clear how this case should be handled.
This works for me..
-moz-transition: bottom .3s, right .3s, top 0s, left 0s;
Also make sure your element is still positioned.
In a previous question I figured out how to fix the anti-aliasing caused by rotating an element using CSS3 transitions when the element is hovered. However, that fix has changed the transition. Before the fix, the transition was smooth from start to finish. Since the fix, the transition has become very rigid. (It's worth noting that the transition was never smooth when using Firefox, but using Safari or Chrome it was, prior to the anti-aliasing fix.)
Here is the code I used originally. Note the transition when you hover over the box if you are in Chrome or Safari:
http://jsfiddle.net/CRc9d/
And here is the code with the fix for anti-aliasing:
http://jsfiddle.net/JMgxC/
Is there a way to reconcile the second code so that it preserves the anti-aliasing fix but also provides a cleaner transition?
Background:
Here is a fiddle showing the transition that, when hovered, causes anti-aliasing in the input placeholder: http://jsfiddle.net/EJUhd/
This was answered by Steve Adams in another question. I just had to change my -moz syntax:
From...
-moz-transition-property: rotate;
-moz-transition-duration: .17s;
-moz-transition-timing-function: linear;
To...
-moz-transition: -moz-transform 0.17s linear;
The second jsfiddle is not transitioning at all because the declaration -webkit-transition-duration: .17s, .17s translate3d(0,0,0); isn't valid.
If you want to antialias the first example, just add -webkit-box-shadow: 0 0 1px transparent; to the box and it will antialias with the animation. The latest version of Chrome doesn't need this hack.
http://jsfiddle.net/CWFLN/
Here is another example that illustrates the problem/solution:
http://jsfiddle.net/fKq8y/