how to block autoprefixer from adding -webkit prefixes to a Mozilla specific extension ?
Here are some examples to make my point :
.custom-range::-moz-range-thumb {
-webkit-transition: none;
transition: none
}
-webkit-transition has nothing to do here as it is a Mozilla specific selector (::-moz-range-thumb).
Another crazy output happens with keyframes and transitions, as Autoprefixer creates useless variants
-webkit-transition: -webkit-box-shadow 0.1s ease-out;
transition: -webkit-box-shadow 0.1s ease-out;
transition: box-shadow 0.1s ease-out;
transition: box-shadow 0.1s ease-out, -webkit-box-shadow 0.1s ease-out;
Instead of just
-webkit-transition: -webkit-box-shadow 0.1s ease-out;
transition: box-shadow 0.1s ease-out;
How to fix this ?
Thanks for your help.
You can force Autoprefixer to ignore specific blocks of CSS by using "Control Comments" (their words). It looks pretty flexible.
.className {
/* autoprefixer: off */
something: not-prefixed;
}
Here's the documentation.
But you might also want to submit a bug as what you're seeing could be filtered out.
Related
I have the following CSS transition rule:
.headroom {
-ms-transition: transform 200ms linear;
-webkit-transition: transform 200ms linear;
transition: transform 200ms linear;
}
But latest version of Safari (8.0.6) is not detecting the transition rule:
Why? What am I doing wrong?
Solved it. I had to add prefix like followed:
-webkit-transition: -webkit-transform 200ms linear;
Annoyance.
How can i turn all css3 animations off in just Opera browser ?
I don't want to pickup them completly , just want to turn it off in opera.
You'll be looking at targeting just the opera browser, this is done with a prefix:
-o-transition: none;
So targeting a specific element would have the following:
a {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: none;
transition: all 0.5s ease-in-out;
}
But your transition might be different without looking at a fiddle of your html and css.
At least, i used this code:
noindex:-o-prefocus, * {
animation : none !important;
-o-animation : none !important;
}
and problem is fixed.
Here is the project I'm working on (code copied exactly except for names changed, etc.)
https://c9.io/schwigri/strange-crash/workspace/index.html
The div #logo has the style:
#logo {
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
transition: .4s;
}
This causes an immediate crash in Safari 6.0.5 on OS X 10.8.5.
If I remove these transitions it doesn't crash.
How can I resolve this issue?
Safari has some trouble sometimes with all-property transitions.
Try this:
#logo {
-webkit-transition: color .4s;
-moz-transition: .4s;
-o-transition: .4s;
transition: .4s;
}
Edit: After playing around with it some more, it's actually the combination of your usage of -webkit-transition: all and -webkit-calc() that's causing the problem. This is a bug in Safari, and in order to overcome it, you may need to use javascript to calculate your top margin instead of CSS.
Hope this helps!
I'm trying to animate CSS filters but can't find any information on the correct transition properties. What are they?
Here's an example: http://jsbin.com/onijim/3/
-webkit-transition : -webkit-filter 500ms linear
works in webkit. I don't know about filter support in FF or Opera.
I'm not sure I wholly understand your question.
That's what I'm using. For Mozilla the 2nd is working for me, but in my sources I found it with the -moz- prefix, so it doesn't hurt to keep both.
-webkit-transition: 1s -webkit-filter linear;
-moz-transition: 1s -moz-filter linear;
-moz-transition: 1s filter linear;
-ms-transition: 1s -ms-filter linear;
-o-transition: 1s -o-filter linear;
transition: 1s filter linear, 1s -webkit-filter linear;
On last versions of Chrome which support transition without -webkit- prefix, if you are using transition-property (no shorthand transition) and properties like filter which still needs -webkit- prefix you need to mix unprefixed and prefixed code:
transition-property: width, left, transform, box-shadow, filter, -webkit-filter;
Note that the filter property is repeted with -webkit-filter. This is needed for browsers which do not use prefix, like Firefox, which in that case -webkit-filter is ignored.
Check if you have different values in the filter properties:
WRONG
.link-image {
transition: 0.3s;
filter: brightness(80%);
}
.link-image:hover {
transition: 0.3s;
filter: brightness(10);
}
CORRECT
.link-image {
transition: 0.3s;
filter: brightness(80%);
}
.link-image:hover {
transition: 0.3s;
filter: brightness(100%);
}
So I have the following CSS transitions attached to an element:
a {
-webkit-transition:color 0.1s ease-in, background-color 0.1s ease-in ;
-moz-transition:color 0.1s ease-in, background-color 0.1s ease-in;
-o-transition:color 0.1s ease-in, background-color 0.1s ease-in;
transition:color 0.1s ease-in, background-color 0.1s ease-in;
}
Is there a way to disable these inherited transitions on specific elements?
a.tags { transition: none; }
Doesn't seem to be doing the job.
The use of transition: none seems to be supported (with a specific adjustment for Opera) given the following HTML:
Content
Content
Content
Content
...and CSS:
a {
color: #f90;
-webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;
-moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;
-o-transition:color 0.8s ease-in, background-color 0.1s ease-in;
transition:color 0.8s ease-in, background-color 0.1s ease-in;
}
a:hover {
color: #f00;
-webkit-transition:color 0.8s ease-in, background-color 0.1s ease-in ;
-moz-transition:color 0.8s ease-in, background-color 0.1s ease-in;
-o-transition:color 0.8s ease-in, background-color 0.1s ease-in;
transition:color 0.8s ease-in, background-color 0.1s ease-in;
}
a.noTransition {
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}
JS Fiddle demo.
Tested with Chromium 12, Opera 11.x and Firefox 5 on Ubuntu 11.04.
The specific adaptation to Opera is the use of -o-transition: color 0 ease-in; which targets the same property as specified in the other transition rules, but sets the transition time to 0, which effectively prevents the transition from being noticeable. The use of the a.noTransition selector is simply to provide a specific selector for the elements without transitions.
Edited to note that #Frédéric Hamidi's answer, using all (for Opera, at least) is far more concise than listing out each individual property-name that you don't want to have transition.
Updated JS Fiddle demo, showing the use of all in Opera: -o-transition: all 0 none, following self-deletion of #Frédéric's answer.
If you want to disable a single transition property, you can do:
transition: color 0s;
(since a zero second transition is the same as no transition.)
Another way to remove all transitions is with the unset keyword:
a.tags {
transition: unset;
}
When used with the transition property, unset is equivalent to initial, since transition is not an inherited property:
a.tags {
transition: initial;
}
A reader who knows about unset and initial can tell that these solutions are correct immediately, without having to think about the specific syntax of transition.
Additionally there is a possibility to set a list of properties that will get transitioned by setting the property transition-property: width, height;, more details here
You could also disinherit all transitions inside a containing element:
CSS:
.noTrans *{
-moz-transition: none;
-webkit-transition: none;
-o-transition: color 0 ease-in;
transition: none;
}
HTML:
Content
Content
<div class="noTrans">
Content
</div>
Content
Based on W3schools default transition value is: all 0s ease 0s, which should be the cross-browser compatible way of disabling the transition.
Here is a link: https://www.w3schools.com/cssref/css3_pr_transition.asp