Bug 202055 – text-rendering CSS property beachballs browser

• Component: CSS
• Status: RESOLVED DUPLICATE

Having `text-rendering: optimizeLegibility` can cause the page to beach ball. This is affecting web.whatsapp.com, and was discovered independently here:

https://github.com/jgthms/bulma/issues/2626

The GitHub issue also contains a minimal repro.

Reproduced on MacOS Mojave using:

- Safari 13.0
- WebKit r250139
- Safari Technology Preview Release 92 (Safari 13.1, WebKit 14609.1.4)

[Thomas Levy]

Created attachment 379339 [details]
minimal repro

Clicking the input once does nothing. Clicking the input a second time makes the browser unresponsive.

[Hendrik Runte]

It appears to happen in conjunction with 'appearance: none' which can be used to re-style a select box widget. It can easily be reproduced using this HTML/CSS setup:

´´´
<!-- html -->
<select>
  <option value="">Access Level …</option>
  <option label="No Login" value="NOLOGIN">No Login</option>
  <option label="Trial Member" value="TRIAL">Trial Member</option>
  <option label="Member" value="LOGIN">Member</option>
</select>
´´´

´´´
// css
select {
  -webkit-appearance: none;
  // this will crash/sbbofd on Safari 13:
  text-rendering: optimizeLegibility;
}
´´´

See this codepen to reproduce (the effective line is commented out): https://codepen.io/HendrikR/pen/PoYxxmJ

[Thomas Levy]

Still broken in safari 13.0.1

[Hendrik Runte]

Cannot reproduce the failure with WebKit build r250648 (Mojave). Looks fixed to me.

[Alan Hogan]

This appears to be discussed and fixed in https://bugs.webkit.org/show_bug.cgi?id=202198

[Hendrik Runte]

(In reply to Alan Hogan from comment #5)
> This appears to be discussed and fixed in
> https://bugs.webkit.org/show_bug.cgi?id=202198

I can confirm on this.

[Sam Sneddon [:gsnedders]]

*** This bug has been marked as a duplicate of bug 202198 ***