WebKit CSS content Unicode bug?

by

This is a bug in WebKit that only got fixed recently (in April 2012).

To paraphrase my write-up on escape sequences for CSS identifiers:

In theory (as per the spec), any character can be escaped based on its Unicode code point (e.g. for 𝌆, the U+1D306 “tetragram for centre” symbol: \1d306 or \01d306), but older WebKit browsers don’t support this syntax for characters outside the BMP.

Because of browser bugs, there is another (non-standard) way to escape these characters, namely by breaking them up in UTF-16 code units (e.g. \d834\df06), but this syntax (rightfully) isn’t supported in Gecko ++and Opera 12++.

Since there is currently no way to escape non-BMP symbols in a cross-browser fashion, it’s best to just use these characters unescaped.

In your case, the U+1F4A1 character is a supplementary (non-BMP) symbol. All other symbols are BMP characters, so those aren’t affected by the bug.

I’ve also made a tool to help you with CSS escapes, and it warns you if you enter a non-BMP character:

More Related Contents:

  1. How can I force WebKit to redraw/repaint to propagate style changes?
  2. Webkit bug with `:hover` and multiple adjacent-sibling selectors
  3. Chrome / Safari not filling 100% height of flex parent
  4. How to remove the border highlight on an input text element
  5. :not() selector not behaving the same between Safari and Chrome/Firefox
  6. Webkit CSS to control the box around the color in an input[type=color]?
  7. How to force re-render after a WebKit 3D transform in Safari
  8. Safari/Chrome (Webkit) – Cannot hide iframe vertical scrollbar
  9. Chrome & Safari Error::Not allowed to load local resource: file:///D:/CSS/Style.css
  10. How to style HTML5 range input to have different color before and after slider?
  11. Remove blue border from css custom-styled button in Chrome
  12. See :hover state in Chrome Developer Tools
  13. Blurry text after using CSS transform: scale(); in Chrome
  14. Video auto play is not working in Safari and Chrome desktop browser
  15. WebKit: Blurry text with css scale + translate3d
  16. Background Image for Select (dropdown) does not work in Chrome
  17. Chrome Developer Tools: How to find out what is overriding a CSS rule?
  18. Distinguish Chrome from Safari using jQuery.browser
  19. Chrome renders colours differently from Safari and Firefox
  20. How to reset / remove chrome’s input highlighting / focus border? [duplicate]
  21. What is the correct “-moz-appearance” value to hide dropdown arrow of a element
  22. CSS3 property webkit-overflow-scrolling:touch ERROR
  23. Font weight turns lighter on Mac/Safari
  24. iOS 7 iPad Safari Landscape innerHeight/outerHeight layout issue
  25. Using “word-wrap: break-word” within a table [duplicate]
  26. chrome/safari display border around image
  27. chrome : how to turn off user agent stylesheet settings?
  28. Font-size
  29. Combine CSS Attribute and Pseudo-Element Selectors?
  30. using a div to blur an image behind it? [duplicate]

Leave a Comment