Bug 187959 - REGRESSION: DOM Manipulation reveals drawing defects in editable HTML content
Summary: REGRESSION: DOM Manipulation reveals drawing defects in editable HTML content
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Other
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2018-07-24 09:23 PDT by Daniel Jalkut
Modified: 2023-01-22 13:38 PST (History)
8 users (show)

See Also:


Attachments
Sample HTML file to reproduce hairline selection highlighting defect (1.02 KB, text/html)
2018-07-24 09:23 PDT, Daniel Jalkut
no flags Details
Screenshot of the defect as witnessed in Safari. (17.46 KB, image/png)
2018-07-24 09:24 PDT, Daniel Jalkut
no flags Details
Xcode sample project exhibiting a Legacy WebKit version of the bug in a Mac app (33.26 KB, application/zip)
2018-07-24 09:24 PDT, Daniel Jalkut
no flags Details
Screenshot of the bug as exhbiited by the Mac based sample project (145.43 KB, image/png)
2018-07-24 09:25 PDT, Daniel Jalkut
no flags Details
MarsEdit application which exhibits the bug as it will affect a shipping application (15.11 MB, application/zip)
2018-07-24 09:26 PDT, Daniel Jalkut
no flags Details
Screenshot of the problem as exhibited by MarsEdit (144.82 KB, image/png)
2018-07-24 09:26 PDT, Daniel Jalkut
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Daniel Jalkut 2018-07-24 09:23:06 PDT
Created attachment 345680 [details]
Sample HTML file to reproduce hairline selection highlighting defect

A in the WebKit shipping with Mojave causes drawing glitches when rendering lines of text, ranging from slight pixel-height lines underneath the text lines, to full blacked/whited out rectangles. The problem seems to be exacerbated by a specific kind of DOM manipulation that the TinyMCE project performs while editing text. I've isolated three test cases that I'm guessing are all related to the same underlying problem.

Subcase #1:

1. Open attached "Browser-Based Demo.html" in Safari Version 12.0 (14606.1.24.40.1).
2. Click in the content (anywhere purple).
3. Press Cmd-A to "Select All".

Expected: the selection indicator should be contiugous.
Actual: there is hairline gap between the bottom line's selection highlight, and the line above it. See "Browser-Based Screenshot". Selecting "Force Repaint" from Safari's Debug menu redraws the highlight correctly.

Subcase #2:

1. Open attached "Xcode-Based Demo".
2. Build and Run.
3. Click in the content.
4. Type furiously.

Expected: the typing should proceed without any break in the purple background of the view.
Actual: As the webview's embedded JavaScript performs DOM manipulations based on the keypresses, you will see white flashes around the edited paragraph.

Subcase #3:

The above tests are attempts to crystallize the actual bug affecting my shipping app, MarsEdit. Particularly when the app is in "Typewriter Mode", the combination of DOM manipulations, and perhaps the live scrolling of the webview's content, creates a consistent problem with white hairline defects appearing on the screen.

1. Open attached MarsEdit.app
2. Cancel creating a new blog/setup.
3. Create new document.
4. Select Edit -> Rich Text.
5. Select View -> Typewriter Scrolling.
6. Open Preferences -> Editor, and change the background editing color to something non-white.
7. Click in the blog post content editor and start typing.

Expected: the typing should proceed without any break in the purple background of the view.
Actual: similarly to the test app above, white flashes occur and sometimes single pixel white underlines. The white hairline version of the defect can be persistent and seems to survive redraws in some cases.
Comment 1 Daniel Jalkut 2018-07-24 09:24:22 PDT
Created attachment 345681 [details]
Screenshot of the defect as witnessed in Safari.
Comment 2 Daniel Jalkut 2018-07-24 09:24:58 PDT
Created attachment 345682 [details]
Xcode sample project exhibiting a Legacy WebKit version of the bug in a Mac app
Comment 3 Daniel Jalkut 2018-07-24 09:25:22 PDT
Created attachment 345683 [details]
Screenshot of the bug as exhbiited by the Mac based sample project
Comment 4 Daniel Jalkut 2018-07-24 09:26:12 PDT
Created attachment 345684 [details]
MarsEdit application which exhibits the bug as it will affect a shipping application
Comment 5 Daniel Jalkut 2018-07-24 09:26:46 PDT
Created attachment 345685 [details]
Screenshot of the problem as exhibited by MarsEdit
Comment 6 Radar WebKit Bug Importer 2018-07-24 09:56:20 PDT
<rdar://problem/42545014>
Comment 7 Brent Fulgham 2022-02-13 20:47:07 PST
This bug still reproduces on Safari 15.4 (Beta). We will look into the cause.
Comment 8 Ahmad Saleem 2023-01-22 13:38:17 PST
(In reply to Brent Fulgham from comment #7)
> This bug still reproduces on Safari 15.4 (Beta). We will look into the cause.

It seems to be not reproducible in Safari Technology Preview 162 using "Sample HTML file to reproduce..." and doing selection, it does not show gap, which is still present in Safari 16.2.

I think we can close this.

@Brent - any input?