Bug 250146 – Linear Gradient on Scaled Path Creates Errant Horizontal Lines

• Component: Canvas
• Status: REOPENED

[jonobr1]

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.

[jonobr1]

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)

[jonobr1]

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

[Karl Dubost]

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.

[Karl Dubost]

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

[Ahmad Saleem]

(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.

[Ahmad Saleem]

Created attachment 464365 [details]
STP160 vs Chrome Canary 111

My experience on the canvas while dragging my mouse.

[Karl Dubost]

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

[jonobr1]

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.

[jonobr1]

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

[jonobr1]

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.

[Karl Dubost]

Created attachment 464368 [details]
rendering in Safari

same thing

[Karl Dubost]

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

[jonobr1]

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.

[jonobr1]

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

[jonobr1]

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

[Radar WebKit Bug Importer]

<rdar://problem/104192862>

[Ulrich Stark]

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.