New issue
Advanced search Search tips

Issue 811756 link

Starred by 3 users

Issue metadata

Status: WontFix
Owner: ----
Closed: Feb 2018
Cc:
Components:
EstimatedDays: ----
NextAction: ----
OS: Mac
Pri: 2
Type: Bug



Sign in to add a comment

font-display doesn’t repaint correctly when mixing font-display: optional and swap

Reported by zachleat...@gmail.com, Feb 13 2018

Issue description

UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36

Steps to reproduce the problem:
Navigate to the test case with two web fonts, one roman and one italic. Roman uses font-display: swap and Italic uses font-display: optional.

If the Italic version doesn’t meet the `font-display: optional` timeout, it will render using a system font instead of using font-synthesis to render with the Roman version (faux-italic).

What is the expected behavior?
The Italic version should render using font-synthesis when the Roman web font swaps in if font-display: optional is in use and has given up on rendering.

What went wrong?
The italic version renders using the system font.

Did this work before? No 

Does this work in other browsers? No
 Same behavior in Firefox. This is the first issue I’ve filed (so far).

Chrome version: 64.0.3282.140  Channel: stable
OS Version: OS X 10.12.6
Flash Version:
 
font-display-font-synthesis-check.html
589 bytes View Download

Comment 1 by e...@chromium.org, Feb 13 2018

Status: WontFix (was: Unconfirmed)
content with font-display: optional will not swap, even if a swap happens elsewhere in the page. This is intentional as font-display optional is meant to communicate that a swap isn't desired.
Well, I understand that the rigid interpretation of the specification suggests that a swap should never happen. However, my argument is that this particular rigid behavior is not ideal in the real world. 😀
An issue with your suggested behavior is the interaction with the `swap` (and `block`) loading behavior.  The whole *point* of `optional` is to give people an immediate display, with no swapping later on.  If the Roman version isn't loaded after the `optional` timeout, what should it be doing?  It would be bad if it magically gained swapping behavior because it relied on a `swap` font (or worse, did the same with a `block` font).  As currently written and implemented, you do at least still get faux-italics, it's just of the system font rather than the desired one.

(The spec does note that using different font-display values for the faces of a single family can have undesirable "ransom-note" visual results.)
Thanks for the response!

Using `optional` exclusively on all of your matching font-face blocks for a single family guarantees the no-swapping behavior as expected.

If the Roman version isn’t loaded, keep the fallback. If the Roman loads, re-render.

“It would be bad” for whom? I think this would be an improvement to font-display behavior for users, allowing devs to do a cool thing that previously required JavaScript. I guess I’m confused—you note that mixing font-display values for a single family (per spec) has undesirable “ransom note” visual results. Why not make this a desirable behavior that devs can use to their advantage? Take those lemons and make lemonade, as it were.

I should note that Mozilla is currently discussing making this improvement to their font-display implementation and Safari has already implemented the above behavior.

https://bugzilla.mozilla.org/show_bug.cgi?id=1438567

Would it help to get more developers to leave feedback here on how they think it should behave?

Sign in to add a comment