CSS / CDN not playing nicely together

[OldGrumpyDad]

On CareCure I'm using CloudFront as our CDN. (VB 5.6.1pl1, FreeBSD, MariaDB) The CSS that is generated is generating attributes with broken styles. I'm not sure what I have set wrong, nor what to do to fix this.

In the main.css file (linked here), you can see an attribute for b-icon that looks like this:

.b-icon {
display: inline-block;
background: transparent url(https://d2qzim9a7sklbv.cloudfront.net/"https://d2qzim9a7sklbv.cloudfront.net/core/clientscript/vbulletin_css/style00046l/1596465207-sprite_icons_general.svg") no-repeat scroll 0 0;
overflow: hidden;
text-indent:-99999px
}

Clearly that url() parameter is broken. The URL is repeated twice, once before and once after the doublequote. It is generated in the css_b_icon.css Style, but I haven't modified that style. I can't figure out what to do to stop this from being broken.

My CDN URL setting is https://d2qzim9a7sklbv.cloudfront.net with no trailing slash.
Store CSS Stylesheets and SVG Images as Files? is set to Yes
Virtually everything else works right.

What is causing these CSS stylesheets to be generated wrong, and how do I fix it?

A bit more data. Three other files have some weird things being inserted:

1596465207-content-entry.css:

img{filter:url(https://d2qzim9a7sklbv.cloudfront.net/"data:image/svg+xml;utf8,<svg

1596465207-main.css:

1em;padding-left:.4em;cursorointer;min-height:0;list-style-image:url(https://d2qzim9a7sklbv.cloudfront.net/"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7")}.ui-menu

1596465207-main.css:

.ui-progressbar-overlay{background:url(https://d2qzim9a7sklbv.cloudfront.net/"data:image/gif;base64,

Thanks!

[Wayne Luke]

Do you have any replacement variables set for your style? In the AdminCP go to Styles -> Style Manager and select "Replacement Variables" from the Choose Option Dropdown.

What are the contents of the .b-icon css in the raw template? In the AdminCP go to Styles -> Style Manager and click on the <<>> button. Double click on CSS templates, double click on css_b_icon.css. Search for .b_icon {

What is the value of the imgdir_spriteiconsvb style variable? In the AdminCP go to Styles -> Style Manager and select Style Variable Editor from the Choose Option dropdown. Either scroll to the Image Paths group and click on it or search for the style variable name in the search box.

[OldGrumpyDad]

Sorry I'm slow to reply.

• Do we have replacement variables? No
• for the b_icon definition, I don't think there have been any modifications. This is what we have, which I think this is the original definition:

.b-icon {
display: inline-block;

background:transparent url("{vb:raw spritepath}") no-repeat scroll 0 0;

overflow: hidden;
text-indent: -99999px;
}

• imgdir_spriteiconsvb is empty in the style variables. It has no value.

[Wayne Luke]

Looking at the code and playing around on my local installation, the system should replace the base URL with your CDN when used. The problems are two fold here:

1) https://d2qzim9a7sklbv.cloudfront.net/"https://d2qzim9a7sklbv.cloudfront.net/ - This shouldn't be doubled. Can you provide a screenshot of the CDN value under Settings -> Options -> Server Settings and Optimization Options?

2)
list-style-image:url(https://d2qzim9a7sklbv.cloudfront.net/"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7") this is referencing an inline image. The URL shouldn't even be added here.

In my testing, I get this output when stored in the database:

.b-icon {
display: inline-block;
background: transparent url("https://cdn.local/sprite.php?styleid=36&td=ltr&sprite=sprite_icons_general.svg&ts=1596742953") no-repeat scroll 0 0;
overflow: hidden;
text-indent: -99999px
}

This is the output when I store the CSS and Sprites as files:

.b-icon {
display: inline-block;
background: transparent url("https://cdn.local/core/cache/css/style00036l/1596743513-sprite_icons_general.svg") no-repeat scroll 0 0;
overflow: hidden;
text-indent: -99999px
}

This would be correct if that was a valid CDN URL.

[Wayne Luke]

Okay, I am going to call this a bug and write it up for the developers. The issue occurs when you "Store CSS and SVG" as files. I would say the workaround is to turn this off but that defeats the entire point of having a custom CDN.

[Wayne Luke]

https://tracker.vbulletin.com/vbulle...sues/VBV-20491

[OldGrumpyDad]

Thanks for confirming it!