SVG data URL background image corruption when transform:rotated
Reported by
stuart.l...@gmail.com,
Dec 7 2017
|
||||
Issue description
UserAgent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Ubuntu Chromium/62.0.3202.94 Chrome/62.0.3202.94 Safari/537.36
Steps to reproduce the problem:
Apply a SVG background as a data URL to an element and then rotate the element with transform, and the lines of the SVG are "ragged".
Test case:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style>
div {
border: 1px solid red;
width: 200px;
height: 200px;
margin-left: 100px;
background-color: #FFFCF9;
background-image:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><path style="fill:#BC4B51" d="m 168,300 -65,-33 -65,31 11,-71 -49,-53 71,-12 35,-63 33,64 70,13 -50,51 z"/></svg>');
background-size: 40% 40%;
}
div:nth-of-type(2) {
transform: rotateZ(-45deg);
margin-top: 100px;
}
</style>
</head>
<body>
<div></div>
<p>Observe that the starry background in the rotated square has "ragged" edges in
Chrome "62.0.3202.94 (Official Build) Built on Ubuntu,
running on Ubuntu 16.04 (64-bit)"</p>
<div></div>
</body>
</html>
What is the expected behavior?
What went wrong?
See attached screenshot; the lines of the star in the SVG are corrupted.
Did this work before? N/A
Does this work in other browsers? N/A
Chrome version: 62.0.3202.94 Channel: n/a
OS Version:
Flash Version: Shockwave Flash 25.0 r0
,
Dec 11 2017
Resampling issue when rotating the composited layer?
,
Dec 12 2017
The tile/repeat-mode appear to have something to do with it - with 'no-repeat' I don't see any "artifacts". (Different code-path is probably the explanation there.) So, something with picture shaders? Threw the test into a fiddle: https://jsfiddle.net/mtp31wp5/
,
Feb 23 2018
,
Feb 23 2018
|
||||
►
Sign in to add a comment |
||||
Comment 1 by dtapu...@chromium.org
, Dec 11 2017