Bug 244977

Summary: Yammer Question Field on Live Events does not show "Caret" or "I-Beam"
Product: WebKit Reporter: Ahmad Saleem <ahmad.saleem792>
Component: HTML EditingAssignee: Nobody <webkit-unassigned>
Status: RESOLVED WORKSFORME    
Severity: Normal CC: ap, bfulgham, cdumez, karlcow, rniwa, simon.fraser, webkit-bug-importer, wenson_hsieh
Priority: P2 Keywords: InRadar
Version: Safari 15   
Hardware: Unspecified   
OS: Unspecified   
See Also: https://bugs.webkit.org/show_bug.cgi?id=135914
Attachments:
Description Flags
Yammer Question Field - Safari does not show "Caret" here for typing none

Description Ahmad Saleem 2022-09-09 07:44:02 PDT 
Hi Team,

I hope you are well.

This is something I identified while using my personal laptop for work (which is allowed), I was attending an live event on Yammer and noticed that when I was trying to ask Question from the field, Safari was not showing caret or I-Beam to show that I can start typing.

It does not matter whether you have "Dark" or other theme and it does not just show.

REPRODUCIBLE in "Safari 15.6.1 and Safari Technology Preview 153".

While it does show caret or I-Beam in Chrome Canary 107.

I don't have any reproducible test case but this the HTML of the field:

______

<div class="editor-1051"><div><span class="root-1057"><div class="DraftEditor-root DraftEditor-alignCenter"><div class="public-DraftEditorPlaceholder-root"><div class="public-DraftEditorPlaceholder-inner" id="placeholder-2f7vs" style="white-space: pre-wrap;">Enter your question</div></div><div class="DraftEditor-editorContainer"><div aria-describedby=" " aria-label="Ask a question" aria-multiline="true" class="notranslate public-DraftEditor-content" contenteditable="true" role="textbox" spellcheck="true" style="outline: none; -webkit-user-select: text; white-space: pre-wrap; word-wrap: break-word;" tabindex="0"><div data-contents="true"><div class="" data-block="true" data-editor="2f7vs" data-offset-key="cri8h-0-0"><div data-offset-key="cri8h-0-0" class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"><span data-offset-key="cri8h-0-0"><br data-text="true"></span></div></div></div></div></div></div></span></div></div>
_____

I will attach screenshot of the field as reference and if we have any contact within Microsoft and we can ask for any reduction or understanding from them, it would be great.

Thanks!
Comment 1 Ahmad Saleem 2022-09-09 07:44:48 PDT 
Created attachment 462229 [details]
Yammer Question Field - Safari does not show "Caret" here for typing
Comment 2 Karl Dubost 2022-09-13 14:09:13 PDT 
Hi Adhmad,

Thanks for the report. 
The current html doesn't provide a way to test why the caret disappears. And this requires an account with an access to a yammer account.
That would be great if you could reduce a bit the test case or at least with devtools trying to find out if it's related to CSS or something else. 

I also wonder if this is specific to your own network or if it's happening in any Yammer network. 

Currently it's quite hard to know what is happening.
Comment 3 Karl Dubost 2022-09-13 14:17:22 PDT 
I can simulate with 


data:text/html,<!doctype%20html><html><div%20%20%20contenteditable="true"%20%20%20style="%20%20%20%20%20background-color:%20gold;%20%20%20%20%20color:%20transparent;%20%20%20%20%20height:%205ch;%20%20%20%20%20width:%2020ch;">%20</div>

aka 

<div
  contenteditable="true"
  style="
    background-color: gold;
    color: transparent;
    height: 5ch;
    width: 20ch;">
</div>


but then the cursor disappears in all browsers. 
It would be useful to know what you see in the Web Inspector for the CSS.
Comment 4 Ahmad Saleem 2022-09-13 15:40:03 PDT 
Other Style Sheet

.editor-1076 {
    width: 100%;
    cursor: text;
    min-height: 105px;
    padding-bottom: 12px;
}

html * {
    box-sizing: inherit;
}


___

UA Style Sheet

address, article, aside, div, footer, header, hgroup, main, nav, section {
    display: block;
}

____

html ::before {
    box-sizing: inherit;
}

___

Inherited:

.css-1047 {
    font-family: "Segoe UI", "Segoe UI Web (West European)", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
    -webkit-font-smoothing: antialiased;
    font-size: 0.875rem;
    font-weight: 400;
    line-height: 1.25rem;
    flex-basis: 25%;
    height: auto;
    width: auto;
    flex-grow: 25;
    flex-shrink: 1;
    min-width: 392px;
    max-width: 596px;
    overflow-y: scroll;
    padding-top: 0px;
    padding-right: 16px;
    padding-bottom: 0px;
    padding-left: 16px;
}

______

I am happy to share my screenshot to show the issue, let me know if you are interested but meanwhile I have did inspect and took these CSS values.

Thanks!
Comment 5 Radar WebKit Bug Importer 2022-09-16 07:44:16 PDT 
<rdar://problem/100026705>
Comment 6 Ahmad Saleem 2022-11-07 14:24:55 PST 
I checked with Safari Technology Preview 157, which has fix about :before pseudo element and mentioned in "See Also" but I am still not able to see the caret. Only when I start typing then it start showing it up. Just wanted to post it.
Comment 7 Ahmad Saleem 2023-03-31 06:21:02 PDT 
I just checked Yammer today with Safari 16.4 and it seems that now it works correctly.

Marking this as "RESOLVED WORKSFORME". Thanks!