<p dir="auto">Compiling a custom Bootstrap via the <a href="http://getbootstrap.com/customize/" rel="nofollow">http://getbootstrap.com/customize/</a> website feature generates boostrap.css with selectors in an incorrect order.</p>
<p dir="auto">I found this out when trying to figure out why the DIV modal-backdrop was appearing black instead of transparent.<br>
As we know.. the order matters!<br>
Custom*:<br>
.modal-backdrop.in    line:5094<br>
.fade.in                     line:5894<br>
<a href="http://getbootstrap.com/javascript/#modals" rel="nofollow">http://getbootstrap.com/javascript/#modals</a><br>
.modal-backdrop.in    line:5665<br>
.fade.in                     line:2366<br>
*the only setting I changed for 'custom' was setting @grid-float-breakpoint to 920px</p>
<p dir="auto">I noticed that if you use customizer, this block of css is compiled to the end of bootstrap.css instead of normally around line 2800:</p>
<p dir="auto">.fade {<br>
opacity: 0;<br>
-webkit-transition: opacity 0.15s linear;<br>
transition: opacity 0.15s linear;<br>
}<br>
.fade.in {<br>
opacity: 1;<br>
}<br>
.collapse {<br>
display: none;<br>
}<br>
.collapse.in {<br>
display: block;<br>
}<br>
.collapsing {<br>
position: relative;<br>
height: 0;<br>
overflow: hidden;<br>
-webkit-transition: height 0.35s ease;<br>
transition: height 0.35s ease;<br>
}</p>
<p dir="auto">This causes issues such as modals with fade to have a completely black background (as ,fade.in is after .modal-backdrop.in)</p>
<p dir="auto">I am not sure if this is an issue with other css blocks as well but so far I haven't noticed any other effects except for this one.</p>