Bug 278231 – Multiple particles (like lines) appear when trying to render large parts of the SVG elements

• Component: SVG
• Status: RESOLVED FIXED

[Eugene]

Created attachment 472189 [details]
IPAD AIR 4 with bug particles (horizontal lines)

Webkit SVG engine cannot properly render very large svg's with big paths. I was tested it on AIPAD AIR 4 and IPAD Mini. 
There is a SO topic when you can see how it works in Chrome engine browser and how it works in Webkit based browser. https://stackoverflow.com/questions/78875537/safari-ios-struggling-to-render-multiple-svg-objects 
It seems like it was already fixed somedays but now its occur again. 
There is a source code to reproduce this bug https://codepen.io/Clasen00/pen/GRbEGBV

[Eugene]

Created attachment 472190 [details]
Chrome based browser without any particles occur

this is how its should work everywhere

[Alexey Proskuryakov]

Tank you for the report! I see that this was reported against iOS 16. Does this still reproduce for you with iOS 17, or 18 beta?

For what it's worth, https://codepen.io/Clasen00/pen/GRbEGBV looks as expected to me in macOS 15 beta, and I'd expect such issues to usually be cross-platform.

[Karl Dubost]

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

To be more explicit 

1. Load https://codepen.io/Clasen00/pen/GRbEGBV
2. with the trackpad do a zoom in or zoom out

Result:
Observe the remaining traces of the line on the image. 


This is happening on macOS 15 too. 

Safari Technology Preview  201           20620.1.2
Firefox Nightly            131.0a1       13124.8.19
Google Chrome Canary       129.0.6667.0  6667.0

It doesn't happen on other browsers. 

Does it affect a live website (apart of this useful test case)?

[Radar WebKit Bug Importer]

<rdar://problem/134313456>

[Eugene]

(In reply to Karl Dubost from comment #3)

> Does it affect a live website (apart of this useful test case)?

Hello!Yes, this is affecting our website where we are using this technology (SVG and more) https://nucleus-histology.ru/ 

If you need a user to test something we could create it for you and your team.

[Eugene]

Hello! Would be there any updates on this bug anytime soon?

[Karl Dubost]

The bug is being investigated.

[Santosh]

I reported a similar issue here: https://stackoverflow.com/questions/78940358/svg-rendering-issues-on-ios-18-beta-parabolic-graphs-breaking
In my case, SVG paths were not rendered properly specific to the iOS 18 beta.

[Alexey Proskuryakov]

Thank you for the comment. If there was a similar issues that has started with iOS 18 betas, please file a new bug report in Bugzilla, as it wouldn't be exactly the same as this older one.

[Eugene]

Hello @(In reply to Karl Dubost from comment #7)
> The bug is being investigated.

Hello! I hope this email finds you well. Last day sad thing happened. Now its possible to reproduce this bug in a Dekstop Safari 18.2 (20620.1.16.11.8) version. 
Everyting is the same but now it not only on IPad but also on a dekstop mode.
I hope your team will find a way to fix this, thank you!

[Eugene]

(In reply to Eugene from comment #10)
> Hello @(In reply to Karl Dubost from comment #7)
> > The bug is being investigated.
> 
> Hello! I hope this email finds you well. Last day sad thing happened. Now
> its possible to reproduce this bug in a Dekstop Safari 18.2
> (20620.1.16.11.8) version. 
> Everyting is the same but now it not only on IPad but also on a dekstop mode.
> I hope your team will find a way to fix this, thank you!

BTW It was reproduced on 15.2 MacOS version

[Taher]

Pull request: https://github.com/WebKit/WebKit/pull/57890

[Taher]

An observation is that when using an updated version of the third-party library, the artifacts disappear. codepen's version uses 2.0.6

<script src="https://cdn.jsdelivr.net/npm/@recogito/annotorious-openseadragon@2.7.14/dist/openseadragon-annotorious.min.js"></script>

[EWS]

Committed 307282@main (8ddcdb6f831a): <https://commits.webkit.org/307282@main>

Reviewed commits have been landed. Closing PR #57890 and removing active labels.

[Eugene]

Hooorrraaay!! Big thanks to all who were participated!