Weird Chrome border size размер шрифта ошибка

Question

Извините за запутанное название, но эта ошибка просто странная.

Я работаю над некоторыми кнопками и замечал, что если моя кнопка имеет границу + радиус границы + наложение (используется для градиентов) на определенный размер шрифта, Chrome отображает правую границу 2 px вместо 1.

Вот скрипка

http://jsfiddle.net/3x73q9md/

Я не уверен, что если мой оверлей контейнер наследуя что-то, но я не могу найти исправление, за исключением изменения размера шрифта.

также попытался

font:0/0 a; 

на наложенной контейнере и всех видов CSS хаков, но это просто не имеет смысла.

Кнопка относительная и наложенная абсолютная протяженность во всех направлениях.

Может кто-нибудь объяснить, что это.

Обратите внимание, что я не прошу добавить/удалить/изменить текущую структуру html. Просто нужно понять, почему это происходит и возможное решение для этого.

Answer 1

change .overlay class border-radius: inherit; - border-radius: 0;

 .overlay {border-radius:0;} 

Демо: http://jsfiddle.net/3x73q9md/1/