Что сделать чтобы поведение css было одинаковое во всех браузерах?

Есть кнопка, которая при наезде на неё курсора плавно появляется и плавно исчезает.
В FireFox работает нормально, но в Chrome поведение меняется. Что сделать, чтобы этого
избежать? Если это поможет, то использую sass и gulp. Браузеры последних версий.

Вот код на который грешу, ну и другого почти и нет -

.container-mouseleave {
	opacity: 0.2;

	transition: opacity 0.3s, visibility 0.3s;
}

.container-mouseenter {
	opacity: 0.5;

	transition: opacity 0.3s, visibility 0.3s;
}