Bug 187454

Created attachment 344554 [details] screenshot in the three browsers spin-off of https://webcompat.com/issues/17605 1. Go to http://penang-hokkien.gitlab.io/ 2. Just look at the button. * Firefox and Safari at first load display an oval on the side. * Chrome gets it right at first load. * Firefox gets it right if resizing the window (repaint) * Safari never changes. Screenshot: Top Firefox Middle Safari Bottom Chrome https://webcompat.com/uploads/2018/7/a9c661df-5edf-4ac6-94a5-7b314ff1d09a.jpg Markup The markup is ```html <label for="lang-zh"> <span class="lang-toggle__zh" lang="zh">中文</span> </label> ``` The CSS for the label ```css input[name="language"] ~ label { background-color: #f4f1ee; background-image: -webkit-gradient(linear,left top,left bottom,from(#f4f1ee),to(#fff)); background-image: linear-gradient(180deg,#f4f1ee,#fff); border-radius: 50%; box-shadow: 0 8px 10px 0 rgba(0,0,0,.3),inset 0 4px 1px 1px #fff,inset 0 -3px 1px 1px hsla(9,6%,79%,.5); display: inline-block; vertical-align: middle; padding: .5em; font-size: 75%; -webkit-transition: background .1s linear,-webkit-box-shadow .1s linear; transition: background .1s linear,box-shadow .1s linear; margin: 0 1em 1em; } .l-toggle__en:checked ~ label[for="lang-en"], .l-toggle__zh:checked ~ label[for="lang-zh"] { background-color: #efedec; background-image: -webkit-gradient(linear,left top,left bottom,from(#efedec),to(#f7f4f4)); background-image: linear-gradient(180deg,#efedec,#f7f4f4); box-shadow: 0 3px 5px 0 rgba(0,0,0,.4),inset 0 -3px 1px 1px hsla(9,6%,79%,.5); color: #4cb09c; text-shadow: 1px 1px 3px #5db9a6; } ``` The CSS for the span ```css .lang-toggle__en, .lang-toggle__zh { line-height: 3em; } .lang-toggle__zh { -webkit-writing-mode: vertical-lr; -ms-writing-mode: tb-lr; writing-mode: vertical-lr; height: 3em; text-align: center; } ```