Bug 187454 – The round button for the chinese language selector is not properly drawn

• Status: NEW
• Component: Layout and Rendering

[karl]

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


```

[Radar WebKit Bug Importer]

<rdar://problem/41980917>

[karl]

A parallel issue has been opened on Firefox (Mozilla).
https://bugzilla.mozilla.org/show_bug.cgi?id=1473789

The discussion depends on https://github.com/w3c/csswg-drafts/issues/2890

with a simplified test case
https://bugzilla.mozilla.org/attachment.cgi?id=8990655

[Ahmad Saleem]

Using the test case from Comment 02, I am able to reproduce this issue on Safari 16 and STP 154 and the "grey" color does not cover behind "Chinese" like other browsers (Chrome Canary 108 and Firefox Nightly 107). Thanks!