WebKit Contenuto CSS Unicode bug?

Question

In una pagina sto utilizzando un carattere Web personalizzato (utilizzando @font-face) per le icone. Ogni carattere nel set ha un valore Unicode appropriato.

Nei browser basati su WebKit (Chrome, Safari, Android), uno dei glifi non viene visualizzato. Invece, viene mostrato il glifo predefinito o un diamante con all'interno un punto interrogativo.

In Firefox, Opera e persino Internet Explorer, i caratteri sono tutti visualizzati correttamente.

Fatta eccezione per Safari (Windows), questo problema si verifica solo quando inserisco i caratteri Unicode tramite la proprietà CSS content. Se inserisco il carattere direttamente nell'HTML utilizzando uno character reference, viene visualizzato correttamente.

Ad esempio, quando i caratteri Unicode vengono inseriti come contenuti CSS ...

/* CSS: */ 
span.css_font_icon:before { 
    display: inline; 
    font-family: "Ghodmode Icons", "Webdings", sans-serif; 
    content: '\002302 \01F4A1 \00270D \002139'; 
} 

<!-- HTML --> 
<span class="css_font_icon"></span> 

... Tutti mostrano in Firefox, Opera e Internet Explorer, ma il secondo (\ 01F4A1) doesn può essere visualizzato in qualsiasi browser Webkit su Linux, Windows o Android. Invece, mostra il glifo predefinito (nei browser Android) o un diamante con all'interno un punto interrogativo (Chrome (Windows), Safari (Windows)).

Inserimento dei caratteri utilizzando i riferimenti di caratteri Unicode HTML ...

/* CSS: */ 
span.html_font_icon { 
    font-family: "Ghodmode Icons", "Webdings", sans-serif; 
} 

<!-- HTML: --> 
<span class="html_font_icon">&#x2302;&#x1F4A1;&#x270D;&#x2139;</span> 

... funziona bene in Firefox, Opera e Internet Explorer. Chrome (Windows) e i browser Webkit Android mostrano anche il simbolo dal riferimento di carattere HTML, ma Safari (Windows) mostra il glifo predefinito.

ho condensato il codice originale in una piccola pagina che riproduce il problema: http://www.ghodmode.com/testing/unicode-insertion/

Avete mi sono imbattuto in un insolito bug WebKit, o sto facendo qualcosa di sbagliato?

Non ho un dispositivo iOS corrente per testarlo, quindi i commenti che descrivono il comportamento su iPhone/iPad sono i benvenuti.

Answer 1

Questo è a bug in WebKit che è stato risolto solo di recente (in aprile 2012).

Parafrasando my write-up on escape sequences for CSS identifiers:

In teoria (secondo le specifiche), any character can be escaped based on its Unicode code point (per esempio per , U + 1D306 “tetragram per il centro” simbolo: \1d306 o \01d306), ma older WebKit browsers don’t support this syntax for characters outside the BMP.

causa di problemi del browser, c'è un altro (non-standard) via di fuga questi caratteri, ovvero da loro rottura in UTF-16 unità di codice (es \d834\df06), ma questa sintassi (giustamente) non è supportata in Gecko + + e Opera 12 ++.

Poiché attualmente è disponibile lo no way per uscire da non-BMP symbols in modalità cross-browser, è preferibile utilizzare questi caratteri senza caratteri di escape.

Nel tuo caso, il carattere U + 1F4A1 è un simbolo supplementare (non BMP). Tutti gli altri simboli sono caratteri BMP, quindi quelli non sono influenzati dal bug.

ho anche fatto a tool to help you with CSS escapes, e ti avverte se si inserisce un carattere non-BMP: