Issue metadata
Sign in to add a comment
|
var() with relative url() in multi-value CSS properties
Reported by
justinw...@cosmic.org.uk,
Oct 1 2016
|
||||||||||||||||||||||||
Issue description
UserAgent: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/53.0.2785.116 Safari/537.36
Example URL:
Steps to reproduce the problem:
New html document:
<!DOCTYPE html>
<html>
<head>
<style>
:root {
--colour: red;
}
div {
width: 50px;
height: 50px;
}
.not-working {
background: var(--colour) url(relative/path/to/image.jpg);
}
.check-relative {
background: url(relative/path/to/image.jpg);
}
.working {
background: var(--colour) url(http://absolute/path/to/image.jpg);
}
</style>
</head>
<body>
<div class="not-working"></div>
<div class="check-relative"></div>
<div class="working"></div>
</body>
</html>
The image paths in the CSS should point to the same file, one using relative pathing, the other using absolute path.
What is the expected behavior?
All <div>s should show the same image as its background.
What went wrong?
The .not-working displays the background colour instead of the image. This is because the var() has some kind of conflict with url(), preventing relative path referencing in url() from working.
Does it occur on multiple sites: Yes
Is it a problem with a plugin? No
Did this work before? N/A
Does this work in other browsers? Yes
Chrome version: 53.0.2785.116 Channel: n/a
OS Version: 10.0
Flash Version: Shockwave Flash 23.0 r0
,
Oct 3 2016
,
Oct 4 2016
|
|||||||||||||||||||||||||
►
Sign in to add a comment |
|||||||||||||||||||||||||
;){kind=link}
Comment 1 by justinw...@cosmic.org.uk
, Oct 1 2016