190807 2018-10-22 14:30:27 -0700 CSS variables with url() don't use correct base URL 2021-04-02 03:54:18 -0700 1 1 1 Unclassified WebKit CSS Safari Technology Preview Mac macOS 10.14 RESOLVED DUPLICATE 198512 InRadar P2 Major --- 1 craig.hockenberry webkit-unassigned chris.burgin dino gsnedders koivisto mmaxfield simon.fraser timothy t.tom twilco.o webkit-bug-importer oldest_to_newest 1471350 0 craig.hockenberry 2018-10-22 14:30:27 -0700 CSS variables for a url(), when placed in a subfolder of a website, do not work correctly. To reproduce this problem, create a "test.css" file in /mysite/tests/stylesheets: :root { --configuration-icon: url('../images/test.png'); } section button { background-image: var(--configuration-icon); } Create an image called "test.png" in /mysite/tests/images/ In the latest Safari Technology Preview, the Network tab in the Web Inspector will show "test.png" highlighted in red. The 404 response is caused because the browser is trying to load "/images/gear_light.png" instead of "/tests/images/gear_light.png". The CSS 3 documentation states: "For CSS style sheets, the base URL is that of the style sheet itself, not that of the styled source document." I'm assuming that this applies even though they're specified through CSS variables. Additionally, if you do any CSS animation on the page, you'll see *many* of these failed requests (one for each frame of the animation.) A live example can be found here: https://furbo.org/stuff/DarkModeCSS/ - there should be an icon next to "Click to Switch Themes". If you click on the button, you'll see many failed "gear_light.png" requests during the transition. Tested with STP: Release 67 (Safari 12.1, WebKit 14607.1.9.0.1). Chrome Version 69.0.3497.100 (Official Build) (64-bit) handles the url() variables correctly. 1471409 1 webkit-bug-importer 2018-10-22 16:44:23 -0700 <rdar://problem/45470981> 1638534 2 chris.burgin 2020-04-07 07:50:59 -0700 I am also having this problem. It seems to be present if a `var` is present anywhere in `background`. Causing it to look at the document not the relative url as specified below. > https://www.w3.org/TR/CSS1/ 6.4 "Partial URLs are interpreted relative to the source of the style sheet, not relative to the document". background: url(../images/chevron-down-faded-0845b94284a0a5a42493e703d7ab4a8b.svg) no-repeat center,linear-gradient(to bottom, var(--color-white) 53%, #e2e2e2 98%) If I replace `var(--color-white)` with `#fff` the image is loaded correctly. 1694497 3 twilco.o 2020-10-03 21:49:25 -0700 This is a duplicate of https://bugs.webkit.org/show_bug.cgi?id=198512 (technically the other way around, but other bugs are linking to 198512 so I think we should use that one). 1746450 4 gsnedders 2021-04-02 03:54:18 -0700 *** This bug has been marked as a duplicate of bug 198512 ***