Permalink
Browse files

Super quick fix/hack for background images borked on Chrome Android

For some weird reason, background-image scaling is borked on Chrome
Android. Seems to happen for the JPG image but NOT the PNG image.
When I change the image source to PNG, everything *works fine*.

Current hack is, instead of just pointing to the larger-file-size PNG,
I create a WebP image from the JPG, which seems to NOT trigger the bug.
Added a WebP detection as well, hopefully will run *before* the JSON
loads.
  • Loading branch information...
cheeaun committed Jul 19, 2016
1 parent a31ce28 commit d3ea7320b1d9c897a53135d929544b5f65f25938
Showing with 11 additions and 0 deletions.
  1. BIN data/pokemon.webp
  2. +11 −0 index.html
View
Binary file not shown.
View
@@ -77,6 +77,9 @@
transform: scale(.9, .9);
transition: transform .2s;
}
.support-webp #list li .img{
background-image: url(data/pokemon.webp);
}
#list li a:hover .img{
transform: scale(1, 1);
}
@@ -129,6 +132,14 @@ <h1>Repokémon</h1>
};
xhr.open('GET', 'data/repokemon.json');
xhr.send();
var img = new Image();
img.onload = function(){
if (img.width > 0 && img.height > 0){
document.body.className = 'support-webp';
}
};
img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';
</script>
<script async defer src="https://buttons.github.io/buttons.js"></script>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

0 comments on commit d3ea732

Please sign in to comment.