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.
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!
.mark.studio{
background: url(../images/studio_icon.png) no-repeat;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
height: 50px;
width: 50px;
z-index:103 !important;
}
.mark.studio:hover{
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
-ms-transition: all .3s ease-in-out;
background: url(../images/studio_icon-hover.png) no-repeat;
z-index:103 !important;
}
With this css on hover the image morphs from the original image to the hover image giving a really cool effect, in firefox and IE9 I just get a hover image replacement. I put the -webkit-transition in both selectors but i'm pretty sure it only needs to be in
.mark.studio
Specify the unprefixed version of transition; Firefox and Internet Explorer dropped the prefixes. (Note that it’s Internet Explorer 10; IE9 doesn’t support transition.)
.mark.studio {
background: url(../images/studio_icon.png) no-repeat;
-webkit-transition: all .3s ease-in-out;
-moz-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
height: 50px;
width: 50px;
z-index: 103 !important;
}
.mark.studio:hover {
background-image: url(../images/studio_icon-hover.png);
}
I took the liberty of taking z-index and transition off the :hover state; it’s pointless to add them again. (Unless you have another z-index with !important that overrides it, which would be a really bad design.)
Internet Explorer 9 doesn't support the -ms-transition tag, it only works properly on Internet Explorer 10 and up. IE10 supports both.
I have in my CSS file the following code, which globally turns on transitions on all links for all CSS properties on anchor elements:
a{
display:block;
-webkit-transition: all 0.2s ease;
-moz-transition: all 0.2s ease;
-o-transition: all 0.2s ease;
-ms-transition: all 0.2s ease;
transition: all 0.2s ease;
}
Later in CSS file, I would like to turn off transition on specific links (let's say with class notrans) but only for background-position.
Something like:
a.notrans{
-webkit-transition: background-position 0;
-moz-transition: background-position 0;
-o-transition: background-position 0;
-ms-transition: background-position 0;
transition: background-position 0;
}
But this code does not work.
I must turn background-position transition and keep other transitions, so sprite - background image would not move on a.notrans ...
You just have to declare new property for transitions, and old inherited ones are gone.
So, i just used this>
a.notrans{
-webkit-transition:color .2s;
-moz-transition:color .2s;
-o-transition:color .2s;
-ms-transition:color .2s;
transition:color .2s;
}
After this, only color transition is working!
Maybe there is better solution ?
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