Bug 198279

Summary: Repeating SVGs in CSS background-image create extra space in between the SVGs
Product: WebKit Reporter: senorspamarino
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Blocker CC: ahmad.saleem792, bfulgham, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: WebKit Nightly Build   
Hardware: All   
OS: All   
Attachments:
Description Flags
Screenshot plus an edited, zoomed in version, showing the problem.
none
WebKit ToT (zoomed in) from Comment 03 test case none

senorspamarino
Reported 2019-05-27 17:58:31 PDT
1. Include any SVG as a repeating background image 2. Zoom in or out 3. Look very closely. There is, at some zoom levels, a vertical line between every repeat. See https://www.heropatterns.com/ or any website that uses a repeating SVG background and zoom in or out to view this issue.
Attachments
Screenshot plus an edited, zoomed in version, showing the problem. (24.86 KB, image/jpeg)
2019-05-28 06:31 PDT, senorspamarino 		no flags
Details
WebKit ToT (zoomed in) from Comment 03 test case (156.82 KB, image/png)
2023-06-01 03:04 PDT, Ahmad Saleem 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
senorspamarino
Comment 2 2019-05-28 06:31:59 PDT
Created attachment 370732 [details] Screenshot plus an edited, zoomed in version, showing the problem.
senorspamarino
Comment 3 2019-05-28 06:33:07 PDT
Here is a codepen displaying the problem with a higher contrast SVG to use for testing: https://codepen.io/TelFiRE/pen/gJzqaG
Radar WebKit Bug Importer
Comment 4 2022-06-30 16:43:28 PDT
<rdar://problem/96254825>
Ahmad Saleem
Comment 5 2023-06-01 03:04:24 PDT
Created attachment 466562 [details] WebKit ToT (zoomed in) from Comment 03 test case
Note You need to log in before you can comment on or make changes to this bug.