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;
}


```