Announcement

Collapse
No announcement yet.

CSS / CDN not playing nicely together

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS / CDN not playing nicely together

    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:
    Code:
    .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:
    Code:
    img{filter:url(https://d2qzim9a7sklbv.cloudfront.net/"data:image/svg+xml;utf8,<svg
    1596465207-main.css:
    Code:
    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:
    Code:
    .ui-progressbar-overlay{background:url(https://d2qzim9a7sklbv.cloudfront.net/"data:image/gif;base64,

    Thanks!
    Last edited by OldGrumpyDad; Mon 3 Aug '20, 11:31am. Reason: added additional wrongness

  • #2
    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.
    Translations provided by Google.

    Wayne Luke
    The Rabid Badger - a vBulletin Cloud demonstration site.
    vBulletin 5 API

    Comment


    • #3
      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:
      Code:
      .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.

      Comment


      • #4
        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:
        Code:
        .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:
        Code:
        .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.
        Translations provided by Google.

        Wayne Luke
        The Rabid Badger - a vBulletin Cloud demonstration site.
        vBulletin 5 API

        Comment


        • #5
          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.
          Translations provided by Google.

          Wayne Luke
          The Rabid Badger - a vBulletin Cloud demonstration site.
          vBulletin 5 API

          Comment


          • #6
            https://tracker.vbulletin.com/vbulle...sues/VBV-20491
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud demonstration site.
            vBulletin 5 API

            Comment


            • OldGrumpyDad
              OldGrumpyDad commented
              Editing a comment
              Thanks for confirming it!

          Related Topics

          Collapse

          Working...
          X