Bug 198279 - Repeating SVGs in CSS background-image create extra space in between the SVGs
Summary: Repeating SVGs in CSS background-image create extra space in between the SVGs
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: WebKit Nightly Build
Hardware: All All
: P2 Blocker
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks:
 
Reported: 2019-05-27 17:58 PDT by senorspamarino
Modified: 2023-06-01 03:04 PDT (History)
3 users (show)

See Also:

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 an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description senorspamarino 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.
Comment 2 senorspamarino 2019-05-28 06:31:59 PDT 
Created attachment 370732 [details]
Screenshot plus an edited, zoomed in version, showing the problem.
Comment 3 senorspamarino 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
Comment 4 Radar WebKit Bug Importer 2022-06-30 16:43:28 PDT 
<rdar://problem/96254825>
Comment 5 Ahmad Saleem 2023-06-01 03:04:24 PDT 
Created attachment 466562 [details]
WebKit ToT (zoomed in) from Comment 03 test case