New issue
Advanced search Search tips

Issue 810338 link

Starred by 3 users
Status: Untriaged
Owner: ----
Components:
EstimatedDays: ----
NextAction: ----
OS: Linux , Windows , Mac
Pri: 2
Type: Bug



Sign in to add a comment

Font ligatures breaks inside a web component when font comes from imported CSS if not the owner document imports the CSS too

Reported by enjik...@gmail.com, Feb 8 2018 
UserAgent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.140 Safari/537.36

Steps to reproduce the problem:
1. Create a web component with ShadowDOM, either closed or open mode
2. Import a font with font ligatures in the shadow dom with either <link rel="stylehseet"> or @import in CSS; for example https://fonts.googleapis.com/icon?family=Material+Icons
3. Attempt to use the icon; example with Material icons is <i class="material-icons">face</i>

What is the expected behavior?
The icon (font ligature) is shown

What went wrong?
Text is shown instead of icon/ligature. Need to add link to material icons CSS in the document that embeds the web component for the font ligatures to show up.

Did this work before? N/A 

Does this work in other browsers? N/A

Chrome version: 64.0.3282.140  Channel: stable
OS Version: OS X 10.13.3
Flash Version: 

Live demo: https://ipfs.io/ipfs/QmQU2J4R7SEmW1mkUQRqZfDUXp6KzzViGNownYdMc5QUGv/test-case.html
test-case.html
1.3 KB View Download
Screen Shot 2018-02-08 at 12.32.04.png
111 KB View Download

Comment 1 by enjik...@gmail.com, Feb 8 2018 

Just to be more clear, here's som CodePens too.

1. Not working (material icon only imported in shadow DOM):
https://codepen.io/enjikaka/pen/VQPYGN

2. Not working (material icons only imported in document where web comp is embedded):
https://codepen.io/enjikaka/pen/YeNPJb

3. Working: (material icons is imported in both the component and the owner document)
https://codepen.io/enjikaka/pen/eVgmQy

Number 2 is expected because of the ShadowDOM. But that number 1 doesn't work, and number 3 is needed (import in both owner doc and in web comp), is really weird an must be a bug?

Comment 2 by enjik...@gmail.com, Feb 8 2018 

In example 1 above the CSS seems to be fetched and the icons get the .material-icons rules from the imported document, the ligatures just don't show it seems.

Comment 3 by e...@chromium.org, Feb 8 2018

Components: -Blink>Fonts Blink>WebFonts
In case 1 (from comment 1) the webfont isn't loaded and instead the default font is used to render the text.

Comment 4 by ajha@chromium.org, Feb 9 2018

Labels: Needs-Triage-M64

Comment 5 by viswa.karala@chromium.org, Feb 13 2018

Labels: Triaged-ET M-66 FoundIn-66 Target-66 OS-Linux OS-Windows
Status: Untriaged (was: Unconfirmed)
Able to reproduce the issue on reported chrome version 64.0.3282.140 and on the latest chrome version 66.0.3345.0 using Windows-10, Mac 10.12.6 and Ubuntu 14.04. As the issue is seen from M60(60.0.3072.0) considering it as non-regression and marking it as Untriaged.
Note: For testing the issue we have used URL:https://codepen.io/enjikaka/pen/VQPYGN from step-1 in comment#1 

Thanks!

Comment 6 by enjik...@gmail.com, Feb 13 2018 

I've been explained to that the @font-face is "global" and is why this behaviour occurs.

My example #3 works because shadow DOM gets the .material-icons, and the owner document can successfully set the @font-face, which the shadow DOM is later using.

So it seems like the problem is that a @font-face cannot be made inside a shadow DOM. Not sure if that is an issue for the specification or for Chrome though.

Comment 7 by enaza...@gmail.com, Mar 28 2018 

Yes, I faced the same issue.
It doesn't work neither if declare font style at a host page, nor inside a ShadowDOM component.
BUT it works if to declare both. For me it seems a Chrome Bug. Since main purpose of ShadowDOM is to isolate scopes.
►

Sign in to add a comment