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 · 6 comments

Comments

Projects
None yet
2 participants
@hteumeuleu
Owner

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

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Aug 5, 2015

Owner

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.

Owner

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

This comment has been minimized.

Show comment
Hide comment
@M-J-Robbins

M-J-Robbins 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;
}

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

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Aug 18, 2015

Owner

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

Owner

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

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Aug 18, 2015

Owner

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

Owner

hteumeuleu commented Aug 18, 2015

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

@M-J-Robbins

This comment has been minimized.

Show comment
Hide comment
@M-J-Robbins

M-J-Robbins 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).

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

This comment has been minimized.

Show comment
Hide comment
@hteumeuleu

hteumeuleu Jan 15, 2016

Owner

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

Owner

hteumeuleu commented Jan 15, 2016

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

@hteumeuleu hteumeuleu closed this Jan 15, 2016

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment