Support » Plugin: AMP » Background gradients invalid?

  • Resolved jefferisp7

    (@jefferisp7)


    Getting this error: CSS syntax error in tag ‘style amp-custom’ – bad url.
    I did not write this css, but amp did, so….

    This line is highlighted in the amp validator. but in Google only the image:url data:image/svg+xm background-image url is highlighted:

    	/* Inline styles */
    .amp-wp-inline-6bb15cd2cfa65c6d08c9226f02314553{max-width:312px;}.amp-wp-inline-81d118430c7e3c588e46231e4d609b11{-webkit-font-smoothing:antialiased;background-color:#bd081c;background-image:url(data:image/svg+xml; base64,phn2zyb4bwxucz0iahr0cdovl3d3dy53my5vcmcvmjawmc9zdmciighlawdodd0imzbwecigd2lkdgg9ijmwchgiihzpzxdcb3g9ii0xic0xidmxidmxij48zz48cgf0acbkpsjnmjkundq5lde0ljy2mibdmjkundq5ldiyljcymiaymi44njgsmjkumju2ide0ljc1ldi5lji1nibdni42mzismjkumju2idaumduxldiyljcymiawlja1mswxnc42njigqzaumduxldyunjaxidyunjmyldaumdy3ide0ljc1ldaumdy3iemymi44njgsmc4wnjcgmjkundq5ldyunjaxidi5ljq0oswxnc42njiiigzpbgw9iinmzmyiihn0cm9rzt0ii2zmziigc3ryb2tllxdpzhropsixij48l3bhdgg+phbhdgggzd0itte0ljczmywxljy4nibdny41mtysms42odygms42njusny40otugms42njusmtqunjyyiemxljy2nswymc4xntkgns4xmdksmjquodu0idkuotcsmjyunzq0iem5ljg1niwyns43mtggos43ntmsmjqumtqzidewljaxniwymy4wmjigqzewlji1mywymi4wmsaxms41ndgsmtyuntcyidexlju0ocwxni41nzigqzexlju0ocwxni41nzigmteumtu3lde1ljc5nsaxms4xntcsmtqunjq2iemxms4xntcsmtiuodqyideyljixmswxms40otugmtmuntiyldexljq5nsbdmtqunjm3ldexljq5nsaxns4xnzusmtiumzi2ide1lje3nswxmy4zmjmgqze1lje3nswxnc40mzygmtqundyylde2ljegmtqumdkzlde3ljy0mybdmtmunzg1lde4ljkznsaxnc43ndusmtkuotg4ide2ljayocwxos45odggqze4ljm1mswxos45odggmjaumtm2lde3lju1niaymc4xmzysmtqumdq2iemymc4xmzysmtauotm5ide3ljg4ocw4ljc2nyaxnc42nzgsoc43njcgqzewljk1osw4ljc2nya4ljc3nywxms41mzygoc43nzcsmtqumzk4iem4ljc3nywxns41mtmgos4ymswxni43mdkgos43ndksmtcumzu5iem5ljg1niwxny40odggos44nzismtcunia5ljg0lde3ljczmsbdos43ndesmtgumtqxidkuntismtkumdizidkundc3lde5ljiwmybdos40miwxos40nca5lji4ocwxos40otegos4wncwxos4znzygqzcunda4lde4ljyymia2ljm4nywxni4yntigni4zodcsmtqumzq5iem2ljm4nywxmc4yntygos4zodmsni40otcgmtuumdiyldyundk3iemxos41ntusni40otcgmjmumdc4ldkunza1idizlja3ocwxmy45otegqzizlja3ocwxoc40njmgmjaumjm5ldiylja2miaxni4yotcsmjiumdyyiemxnc45nzmsmjiumdyyidezljcyocwyms4znzkgmtmumzayldiwlju3mibdmtmumzayldiwlju3miaxmi42ndcsmjmumdugmtiundg4ldizljy1nybdmtiumtkzldi0ljc4ncaxms4zotysmjyumtk2idewljg2mywyny4wntggqzeylja4niwyny40mzqgmtmumzg2ldi3ljyznyaxnc43mzmsmjcunjm3iemyms45nswyny42mzcgmjcuodaxldixljgyocayny44mdesmtqunjyyiemyny44mdesny40otugmjeuotusms42odygmtqunzmzldeunjg2iibmawxspsijymqwodfjij48l3bhdgg+pc9npjwvc3znpg==);background-position:3px 50%;background-repeat:no-repeat no-repeat;background-size:14px 14px;border-bottom-left-radius:2px;border-bottom-right-radius:2px;border-top-left-radius:2px;border-top-right-radius:2px;border:none;color:#ffffff;cursor:pointer;display:none;font-family:'Helvetica Neue', Helvetica, sans-serif;font-size:11px;font-stretch:normal;font-style:normal;font-variant-caps:normal;font-weight:bold;left:501px;line-height:20px;opacity:1;padding:0px 4px 0px 0px;position:absolute;text-align:center;text-indent:20px;top:156px;max-width:auto;z-index:8675309;}	</style>
    • This topic was modified 10 months, 1 week ago by  Steven Stern.
    • This topic was modified 10 months, 1 week ago by  Steven Stern.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor Ryan Kienstra

    (@ryankienstra)

    Hi @jefferisp7,
    Thanks for bringing this up, and showing the line where this exists. I also saw that issue in the AMP Validator:

    https://validator.ampproject.org/#url=https%3A%2F%2Fwww.scholarscorner.com%2Ftimesup%2Famp%2F

    One way to fix the error seems to be to use single quotes around the background-image:url

    It’s currently:

    
    background-image:url(data:image/svg+xml...)
    

    It should probably be:

    
    background-image:url('data:image/svg+xml...')
    

    Making those changes to the 2 places where the errors occur in the validator fixes this.

    I’m not sure what is creating the <span> element, though. That issue also occurs on the non-AMP page, so it doesn’t look to be caused by this plugin.

    It’s just that AMP shows an error, whereas otherwise the error only appears in the dev tools:

    https://www.scholarscorner.com/timesup
    Non amp page

    thanks. Weird. Turns out that code was in 2 posts, but not sure where it came from or why it was there. I hope it was not a hack of some sort. It looks like gradient or image code, but it doesn’t seem to link to anything I can see.

    Plugin Author Weston Ruter

    (@westonruter)

    It’s the space here that is the problem:

    data:image/svg+xml; base64,phn2zyb4b...

    Removing the space fixes the problem. This will be handled automatically in an upcoming version of the plugin. See https://github.com/Automattic/amp-wp/issues/1089

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Background gradients invalid?’ is closed to new replies.