WebKit Bugzilla
New
Browse
Log In
×
Sign in with GitHub
or
Remember my login
Create Account
·
Forgot Password
Forgotten password account recovery
NEW
198279
Repeating SVGs in CSS background-image create extra space in between the SVGs
https://bugs.webkit.org/show_bug.cgi?id=198279
Summary
Repeating SVGs in CSS background-image create extra space in between the SVGs
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 1
2019-05-27 18:23:55 PDT
More info:
https://stackoverflow.com/questions/56309871/svg-as-a-css-background-is-there-any-way-to-repeat-x-with-no-space-in-between
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.
Top of Page
Format For Printing
XML
Clone This Bug