[Webkit-unassigned] [Bug 187454] New: The round button for the chinese language selector is not properly drawn

[bugzilla-daemon at webkit.org]

https://bugs.webkit.org/show_bug.cgi?id=187454

            Bug ID: 187454
           Summary: The round button for the chinese language selector is
                    not properly drawn
           Product: WebKit
           Version: WebKit Nightly Build
          Hardware: Macintosh
                OS: macOS 10.13
            Status: NEW
          Severity: Normal
          Priority: P2
         Component: Layout and Rendering
          Assignee: webkit-unassigned at lists.webkit.org
          Reporter: karl+webkit at la-grange.net
                CC: bfulgham at webkit.org, simon.fraser at apple.com,
                    zalan at apple.com

Created attachment 344554

  --> https://bugs.webkit.org/attachment.cgi?id=344554&action=review

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


```

-- 
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20180708/c0b2a3d0/attachment.html>