Bug 201034

Summary: Emoji in placeholder text does not appear faded
Product: WebKit Reporter: Jeffrey <jeffreyca16>
Component: TextAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ahmad.saleem792, mmaxfield, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 12   
Hardware: Unspecified   
OS: Unspecified   

Description Jeffrey 2019-08-22 06:57:29 PDT
(Copied from https://bugs.chromium.org/p/chromium/issues/detail?id=932026)

Demo URL: https://e.myconan.net/test-input-placeholder.html

What is the expected behavior?
Emoji in placeholder text should be faded out just like the rest of the text.

What went wrong?
Emoji in placeholder text is fully visible.

Reproducible on Safari 12.1.2 (14607.3.9).
Comment 1 Jeffrey 2019-08-22 07:03:02 PDT
The fix should be a matter of changing the 'color' property of the 'placeholder' element to use an RGBA opacity value (e.g. rgba(0, 0, 0, 0.54)) instead of darkGray in /Source/WebCore/css/html.css, and updating test cases.
Comment 2 Radar WebKit Bug Importer 2019-08-22 14:07:19 PDT
<rdar://problem/54613515>
Comment 3 Myles C. Maxfield 2020-05-22 17:46:34 PDT
Firefox fades the emoji, Chrome doesn't.
Comment 4 Ahmad Saleem 2022-09-24 16:22:03 PDT
(In reply to Myles C. Maxfield from comment #3)
> Firefox fades the emoji, Chrome doesn't.

Chrome mark the bug mentioned in Comment 0 as "WONTFIX" but someone comment that it seems to be fixed on Chrome 88 using Windows Platform but testing on Chrome Canary 108 using macOS 12.6, I still get same behavior as you mentioned and "emoji" does not fade.

Safari 16, STP 154 and Chrome Canary 108 does not fade "emoji" while Firefox Nightly 107 does fade emoji.

Just wanted to share updated input. Thanks!
Comment 5 Ahmad Saleem 2022-09-24 16:27:12 PDT
Does not have anything in UA stylesheet from standard:

https://drafts.csswg.org/css-pseudo-4/#highlight-ua-styles

but has following - UAs may apply additional effects to enhance the presentation of highlighted content, for example dimming content other than the highlighted text.

Firefox has following in UA Stylesheet:

https://searchfox.org/mozilla-central/source/layout/style/res/forms.css#179