在Safari中破解的Bootstrap徽章

Question

我有一个用圆形按钮放置的自举徽章。它适用于我的测试浏览器（1），除了Safari，它沿着圆角按钮边缘的路径被剪切。

CSS：

.toggler_btn {
position: fixed;         bottom: 0px;
right: 0px;              width:30px;
height:30px;             margin:1% 1% 2% 1%;
background-color: #000;  border-radius: 25px;
border:none;             }

HTML

<button type="button" class="toggler_btn" onclick="someJS()">
<img src="/img/chat.svg"><span class="badge">5</span>
</button>

关于SO的其他问题，如this，其中一个解决了徽章完全消失的问题，但这个答案并没有解决我的问题。

（1）使用的浏览器：Safari 9.1，Firefox 46，Opera 36，Chrome 50