Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

AOL and background-image in a <style> tag #2

Closed
hteumeuleu opened this issue Aug 5, 2015 · 10 comments
Closed

AOL and background-image in a <style> tag #2

hteumeuleu opened this issue Aug 5, 2015 · 10 comments
Labels
AOL

Comments

@hteumeuleu
Copy link
Owner

@hteumeuleu hteumeuleu commented Aug 5, 2015

AOL incorrectly replaces the path of a background-image when used in a <style> tag. It wraps the URL of the image with an <a> tag linking to the image itself. The following example…

<style type="text/css">
    .test {
        background-image:url("http://i.imgur.com/A4kblQ3.jpg");
    }
</style>

… becomes :

<style type="text/css">
    .test {
        background-image:url(&quot;<a href="http://i.imgur.com/A4kblQ3.jpg&quot" target=_blank>http://i.imgur.com/A4kblQ3.jpg&quot</a>;);
    }
</style>

The same thing happens if you use single quotes or no quotes at all. It happens with the background-image property and the background shorthand. It happens no matter if the <style> tag is in the <body> or the <head>.

It doesn't happen when using background or background-image inline in a style attribute.

@hteumeuleu
Copy link
Owner Author

@hteumeuleu hteumeuleu commented Aug 5, 2015

In modern browsers, having the background property badly interpreted by AOL when using double quotes or single quotes will break all the following properties. So in the following example, the color property will be ignored because it will be interpreted as part of the background-image value.

<style type="text/css">
    .test {
        background-image:url(&quot;<a href="http://i.imgur.com/A4kblQ3.jpg&quot" target=_blank>http://i.imgur.com/A4kblQ3.jpg&quot</a>;);
        color:red;
    }
</style>

When using no quote, the code will be interpreted as the following :

<style type="text/css">
    .test {
        background-image:url(<a href="http://i.imgur.com/A4kblQ3.jpg" target=_blank>http://i.imgur.com/A4kblQ3.jpg</a>);
        color:red;
    }
</style>

Even if the background-image value is still incorrect, it is valid from a CSS standpoint, and won't break further declarations. So I would advise to avoid using quotes or double quotes in background images declarations.

@hteumeuleu hteumeuleu added the bug label Aug 5, 2015
@M-J-Robbins
Copy link

@M-J-Robbins M-J-Robbins commented Aug 17, 2015

I'm finding it's affecting the following selector too. In this example I just have 2 selectors form [lang=x-withform] and form [lang=x-noform]

.aolReplacedBody form [lang=x-withform] {
  display: block!important;
  background-image: url(<a href="https://api.rebelmail.com/v0/emails/55ca47ffd7d4fe1900a98b22/event.gif?type=variant&amp;variant=limited);
  max-height: none!important;
  overflow: visible!important
}

.aolReplacedBody" target=_blank>https://api.rebelmail.com/v0/emails/55ca47ffd7d4fe1900a98b22/event.gif?type=variant&amp;variant=limited);max-height:none!important;overflow:visible!important
}
.aolReplacedBody</a> form [lang=x-noform]{max-height:0;overflow:hidden
}

As a solution I've just separated the bg image into it's own selector and added this after it

.aolfix{
    aol:fix;
}
@hteumeuleu
Copy link
Owner Author

@hteumeuleu hteumeuleu commented Aug 18, 2015

@M-J-Robbins I think this is more related to this bug. But it's a nice solution you got there.

@hteumeuleu
Copy link
Owner Author

@hteumeuleu hteumeuleu commented Aug 18, 2015

This bug was reported on Twitter to @aolmailhelp and @aolmail.

@M-J-Robbins
Copy link

@M-J-Robbins M-J-Robbins commented Aug 18, 2015

Yeah saw that, wan't aware of that before good catch. But I wasn't using quotes (minify takes them out for me).

@hteumeuleu
Copy link
Owner Author

@hteumeuleu hteumeuleu commented Jan 15, 2016

It seems that this bug was fixed. Background images are no longer badly replaced in AOL.

@hteumeuleu
Copy link
Owner Author

@hteumeuleu hteumeuleu commented Feb 21, 2019

This issue seems to have reappeared. Testing the initial sample of this post, the code becomes:

 #yiv8940145174 .yiv8940145174test {
    background-image:url("<a href="https://ecp.yusercontent.com/mail?url=http%3A%2F%2Fi1.cmail20.com%2Fei%2Fy%2F27%2F262%2F17D%2F032355%2Fcsimport%2Fa4kblq3_0.jpg&t=1550766248&ymreqid=94544d5c-a0a0-c294-2f3c-eb0009010000&sig=SduUSLEF32_3Qqm9a27jSw--~C" class="linkified" target="_blank">https://ecp.yusercontent.com/mail?url=http%3A%2F%2Fi1.cmail20.com%2Fei%2Fy%2F27%2F262%2F17D%2F032355%2Fcsimport%2Fa4kblq3_0.jpg&t=1550766248&ymreqid=94544d5c-a0a0-c294-2f3c-eb0009010000&sig=SduUSLEF32_3Qqm9a27jSw--~C</a>");
} 
@hteumeuleu hteumeuleu reopened this Feb 21, 2019
@hteumeuleu
Copy link
Owner Author

@hteumeuleu hteumeuleu commented Mar 13, 2019

Thanks for Matthieu B. on Slack for the ping, this issue seems fixed now. The previous example is now turned into:

#yiv7928140548 .yiv7928140548test {
    background-image: removedimage__36ec86c5-3c4c-4886-b98f-1ebe79db19e8__url(https://ecp.yusercontent.com/mail?url=http%3A%2F%2Fi1.cmail20.com%2Fei%2Fy%…mreqid=94544d5c-a0a0-c294-2fc6-190009010000&sig=xeBxM_yYh4d4H5JzhEXleA--~C)
}

Can anyone else confirm ? (just to make sure it's deployed everywhere before I close the issue)

@M-J-Robbins
Copy link

@M-J-Robbins M-J-Robbins commented Mar 13, 2019

Back to normal for me too now :)

@hteumeuleu
Copy link
Owner Author

@hteumeuleu hteumeuleu commented Mar 13, 2019

Thanks ! I close this, hoping we won't have to reopen it in three years. :D

@hteumeuleu hteumeuleu closed this Mar 13, 2019
@hteumeuleu hteumeuleu added the AOL label Jul 10, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
2 participants
You can’t perform that action at this time.