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

Ahmad Saleem
Reported 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!
Attachments
Yammer Question Field - Safari does not show "Caret" here for typing (26.91 KB, image/jpeg)
2022-09-09 07:44 PDT, Ahmad Saleem 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Ahmad Saleem
Comment 1 2022-09-09 07:44:48 PDT
Created attachment 462229 [details] Yammer Question Field - Safari does not show "Caret" here for typing
Karl Dubost
Comment 2 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.
Karl Dubost
Comment 3 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.
Ahmad Saleem
Comment 4 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!
Radar WebKit Bug Importer
Comment 5 2022-09-16 07:44:16 PDT
<rdar://problem/100026705>
Ahmad Saleem
Comment 6 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.
Ahmad Saleem
Comment 7 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!
Note You need to log in before you can comment on or make changes to this bug.