CSS ::first-letter + text-transform: uppercase and empty text fragments and Firefox do not work together

[mitar]

I am writing this mostly for posterity. I wanted to use CSS ::first-letter + text-transform: uppercase to transform the first letter of rendered text to upper case. It looks like this does not work well in Firefox, because Vue sometimes renders empty text fragments (to anchor its rendering) and Firefox seems to then look only in the first segment for ::first-letter. It works well in Chrome. It also works interestingly if Vue then reactively changes that element's DOM content despite still having empty text segments before the main text content.

[wyf027]

This looks like a Firefox / CSS pseudo-element edge case rather than something ::first-letter can be made reliable for from the Vue side. Vue can legitimately create text nodes around fragments: in the runtime renderer, fragments use empty text nodes as start/end anchors, and normal text children are represented with createTextVNode() before being patched into the DOM.

So if Firefox only considers the first text-node segment when resolving ::first-letter, a leading empty framework-managed text node can make the pseudo-element miss the actual text even though the DOM is valid. Chrome apparently walks past that case.

For app code, I would avoid depending on ::first-letter when the text may be split by Vue-controlled nodes. The robust options are to capitalize the rendered string in JS/computed state, or render the first character explicitly, e.g. wrap it in a small element and style that instead.

If you want to pursue it as a browser issue, a minimal DOM-only repro with an empty text node before the real text would probably be the clearest thing to file against Firefox. If the repro only happens with Vue-generated output, then it would be worth turning that into a small Vue reproduction too, but the behavior you described sounds consistent with the browser pseudo-element algorithm interacting badly with empty text nodes.

[lilaygo]

I tested this behavior, and I think avoiding ::first-letter for dynamic vue-rendered text is the safest approach.

Since vue can introduce framework-managed nodes around fragments, relying on the browser to resolve ::first-letter may lead to inconsistent behavior. A more predictable solution is to transform the string before rendering or explicitly wrap the first character in its own element and style that.

Thanks for the explanation @wyf027 about the fragment/text-node behavior that helped clarify why this can differ between browsers.