Background-Image shows up in Antetype, is missing in browser

Not sure if this is something I am doing or a bug. These tabs show up perfectly in Antetype but have all their background images missing when the prototype is running in a browser. As with most of my graphic UI elements, I am using CSS variables. If I use the variable parameters for the tab background directly, everything shows up in the browser as well.
What could be the reason for this odd behaviour?
Antetype at top, browser (any browser) at bottom.
image
image

This is the project, in case someone wants to take a look:

FYI, I am encoding the background SVGs directly in the CSS; so it looks like this:

url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 2 2'%3E%3Cg%3E%3Crect width='2' height='2' fill='%23f0f0f0'/%3E%3Crect y='1' width='1' height='1' fill='%23696969'/%3E%3C/g%3E%3C/svg%3E%0A") top right no-repeat / 1px 1px, 
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 2 2'%3E%3Cg%3E%3Crect y='1' width='2' height='1' fill='%23e3e3e3'/%3E%3Crect width='2' height='1' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E ") top left repeat-x / 1px 1px, 
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 2 2'%3E%3Crect y='1' width='2' height='1' fill='%23f0f0f0'/%3E%3C/svg%3E%0A") bottom left repeat-x / 1px 1px, 
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 2 2'%3E%3Cg%3E%3Crect x='1' width='1' height='2' fill='%23e3e3e3'/%3E%3Crect width='1' height='2' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E ") bottom left repeat-y / 1px 1px,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 2 2'%3E%3Cg%3E%3Crect x='1' width='1' height='2' fill='%23696969'/%3E%3Crect width='1' height='2' fill='%23a0a0a0'/%3E%3C/g%3E%3C/svg%3E ") bottom right repeat-y / 1px 1px #f2f2f1; 
	--topTabBackground-Idle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 2 2'%3E%3Cg%3E%3Crect width='2' height='2' fill='%23f0f0f0'/%3E%3Crect x='1' y='1' width='1' height='1' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E%0A") top left no-repeat / 1px 1px, 
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 2 2'%3E%3Cg%3E%3Crect width='2' height='2' fill='%23f0f0f0'/%3E%3Crect y='1' width='1' height='1' fill='%23696969'/%3E%3C/g%3E%3C/svg%3E%0A") top right no-repeat / 1px 1px, 
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 2 2'%3E%3Cg%3E%3Crect y='1' width='2' height='1' fill='%23e3e3e3'/%3E%3Crect width='2' height='1' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E ") top left repeat-x / 1px 1px, 
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 2 2'%3E%3Cg%3E%3Crect x='1' width='1' height='2' fill='%23e3e3e3'/%3E%3Crect width='1' height='2' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E ") bottom left repeat-y / 1px 1px,
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2' height='2' viewBox='0 0 2 2'%3E%3Cg%3E%3Crect x='1' width='1' height='2' fill='%23696969'/%3E%3Crect width='1' height='2' fill='%23a0a0a0'/%3E%3C/g%3E%3C/svg%3E ") bottom right repeat-y / 1px 1px #f2f2f1; 

Here is a stripped-down version with only the elements in question left. The header_include is also bare bones. The bottom set of tabs have their background styling copied in directly, the top set are using the css variable. Still no idea what might be going on here…
image
In Antetype, they look identical:
image

If I change the background colour to red, it is taken. This is only affecting the SVGs used for the borders. Weird.
Debug.atype.zip (3.7 MB)

Ok, it turns out, I need to use individual notations if I am using variables. This seems to be unnecessary if the background is applied directly. What threw me off was that this is the same across all browsers.
So, my variable list now looks like this:

background-image: var(--topTabBackgroundImage-Active);
background-position: var(--topTabBackgroundPosition-Active);
background-repeat: var(--topTabBackgroundRepeat-Active);
background-size: var(--topTabBackgroundSize-Active);
background-color: var(--topTabBackgroundColor-Active);

instead of simply using

background: var(--topTabBackground-Active);

Not sure if this is an inconsistency in the way that variables are supposed to be used but at least it is resolved.

interesting behavior :slight_smile: Reading up the specification: CSS Custom Properties for Cascading Variables Module Level 1 it should be safer to just use the “longhand properties” (backgound-image, background-position etc. instead of only background). I did not know that you simply can use the whole value string, but if it works: fine :slight_smile: