less.js
less.js copied to clipboard
image-width() breaks data-uri()
Calling image-width() affects output generated by data-uri() in Less 3.8.1
This generates correct base64 output:
a {
background: data-uri('images/tick.png');
padding-right: image-width('images/tick.png');
}
This generates invalid base64 output:
a {
padding-right: image-width('images/tick.png');
background: data-uri('images/tick.png');
}
I also noticed this error after upgrading to the latest less version!
It worked in 2.7.3. Doesn't work in 3.9.0
I have this code:
#logo > div
{
@logo: "../ui-high/logo.png";
// this trick is to keep a constant aspect ratio
padding-bottom: (image-height(@logo)/image-width(@logo))*100%;
background: data-uri(@logo) no-repeat center center;
background-size: contain;
}
This used to work fine. Now, the generated base64 data-uri is ignored by the browsers! Other data-uris are not affected.
I can provide before & after if you think it helps, but it should be easy to reproduce.