button transition with $enable-shadows:true not working properly

[wojtask9]

see: http://jsfiddle.net/aze0jzj5/6/

steps to reproduce:
click and hold button for 1sec and then release mouse button

result:
focus outline flickers

This is because BS tries transition from box-shadow: inset to box-shadow: outer

According to https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_buttons.scss#L89
you can disable inset by setting $btn-active-box-shadow:none but that will not work because in other places passing 'none' to box-shadow causes incorrect css rule (for example box-shadow: none, 1px 1px 1px black)

Solution that can be worth consider:
http://tobiasahlin.com/blog/how-to-animate-box-shadow/

[mdo]

I believe this was fixed when we added a check for none to the buttons mixins.

[wojtask9]

are you talking about https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_buttons.scss#L91 ?

so there is another place where it should be placed
https://github.com/twbs/bootstrap/blob/v4-dev/scss/mixins/_buttons.scss#L53