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.

Sign up for GitHub

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

Jump to bottom

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 Webmail

Comments

@hteumeuleu
Copy link
Owner

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

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
Contributor

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

@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

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

@M-J-Robbins
Copy link
Contributor

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

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

@iDerp69 iDerp69 mentioned this issue Feb 19, 2019
Closed
@hteumeuleu
Copy link
Owner Author

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 commented Mar 13, 2019 •
edited
Loading

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
Contributor

Back to normal for me too now :)

@hteumeuleu
Copy link
Owner Author

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

@hteumeuleu hteumeuleu added the AOL Webmail label Jul 10, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
AOL Webmail
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hteumeuleu @M-J-Robbins