Bug 250146

Summary:

Linear Gradient on Scaled Path Creates Errant Horizontal Lines

Product:

WebKit

Reporter:

jonobr1 <jonobrandel>

Component:

Canvas

Assignee:

Nobody <webkit-unassigned>

Status:

REOPENED ---

Severity:

Major

CC:

ahmad.saleem792, dino, karlcow, webkit-bug-importer, webkit

Priority:

Keywords:

InRadar

Version:

Safari 16

Hardware:

Mac (Apple Silicon)

OS:

macOS 13

Attachments:

Description	Flags
Left shows Safari with red horizontal line. Right shows Chrome rendering linear gradients correctly.	none
A screenshot of Safari 14 correctly rendering the linear gradient and path	none
rendering in safari, firefox, chrome	none
STP160 vs Chrome Canary 111	none
STP 160 on M1 MacBook Pro 16" running MacOS 13.0.1	none
rendering in Safari	none
Mobile Safari showing Horizontal Error in Codepen (iOS 16.1)	none

Description jonobr1 2023-01-05 13:40:27 PST

Created attachment 464361 [details]
Left shows Safari with red horizontal line. Right shows Chrome rendering linear gradients correctly.

Go to https://codepen.io/jonobr1/full/rNrWjwb and draw a vertical line by clicking and dragging the mouse. In Chrome the linear gradient (from red at top to blue at bottom) draws correctly. In Safari, the shape draws correctly, but also adds an erroneous red horizontal line at the top. (See attached image where Safari is left and Chrome is right).

You can see the full code (editable) here: https://codepen.io/jonobr1/pen/rNrWjwb

I think it has something to do with saving and restoring the context at different scales to accommodate high dpi devices.

Comment 1 jonobr1 2023-01-05 13:59:19 PST

I can confirm that this is not an issue on older OS of Mac and Safari. (Image attached for Safari 14 and MacOS 10.14.6)

Comment 2 jonobr1 2023-01-05 13:59:47 PST

Created attachment 464362 [details]
A screenshot of Safari 14 correctly rendering the linear gradient and path

Comment 3 Karl Dubost 2023-01-05 16:58:16 PST

Created attachment 464363 [details]
rendering in safari, firefox, chrome

This is working for me on macOS 13 and Safari Tech Preview 160, aka 16+

closing as working for me.

Comment 4 Karl Dubost 2023-01-05 16:59:03 PST

Thanks for the test case and the report. 
As this is working in recent versions, let's close it.

Comment 5 Ahmad Saleem 2023-01-05 17:57:36 PST

(In reply to Karl Dubost from comment #4)
> Thanks for the test case and the report. 
> As this is working in recent versions, let's close it.

Hi Karl, I tried and it seems to still reproducing while I try to drag my mouse on canvas in STP160 compared to Chrome Canary 111.

Comment 6 Ahmad Saleem 2023-01-05 17:59:43 PST

Created attachment 464365 [details]
STP160 vs Chrome Canary 111

My experience on the canvas while dragging my mouse.

Comment 7 Karl Dubost 2023-01-05 18:19:14 PST

ha interesting it doesn't reproduce even when dragging for me. 
Maybe it was fixed in my more recent version of the OS.
on the MacBook Pro with M1 

I also can't reproduce on STP 160 on macOS 13.1
on a MacBook Pro with Intel Iris Plus Graphics 1536 Mo

Comment 8 jonobr1 2023-01-05 20:49:03 PST

Actually, the issue persists in Safari Technology Preview on MacOS 13. I'm on a MacBook Pro M1 16". I'll add an attachment with a screenshot.

Comment 9 jonobr1 2023-01-05 20:51:34 PST

Created attachment 464367 [details]
STP 160 on M1 MacBook Pro 16" running MacOS 13.0.1

Comment 10 jonobr1 2023-01-05 20:53:21 PST

Karl, looking at your screenshot did you by chance not drag the mouse? If you click and it renders once there doesn't seem to be an issue. But, as soon as you drag your mouse the horizontal line comes in.

I've noticed in some screen sizes that it only comes up when the path hits the top or bottom edge of the window.

Comment 11 Karl Dubost 2023-01-05 21:17:21 PST

Created attachment 464368 [details]
rendering in Safari

same thing

Comment 12 Karl Dubost 2023-01-05 21:32:01 PST

Let's reopen as Ahmad and you can reproduce. Let's try to understand what could be the differences.

Comment 13 jonobr1 2023-01-06 10:18:35 PST

Thanks, glad it looks good for you. I made a non-interactive version here: https://codepen.io/jonobr1/pen/NWBbEXy?editors=0010

The issue persists for me still on Safari and STP.

Comment 14 jonobr1 2023-01-09 14:41:58 PST

Following up here that this also occurs in Mobile Safari (iOS 16.1 20B82) attachment has screenshot of latest non-interactive codepen.

Comment 15 jonobr1 2023-01-09 14:42:28 PST

Created attachment 464425 [details]
Mobile Safari showing Horizontal Error in Codepen (iOS 16.1)

Comment 16 Radar WebKit Bug Importer 2023-01-12 13:41:30 PST

<rdar://problem/104192862>

Comment 17 Ulrich Stark 2023-01-15 06:25:36 PST

I'm facing the same issue on my production site and found this stackoverflow question mentioning the same artifacts when rendering gradients: https://stackoverflow.com/questions/75005249/how-can-i-fix-the-issue-with-gradient-figure-rendering-on-safari-on-devices-with.