title: Blurry images on stock android browser
body: <p>I've been trying to figure this out for weeks and have found no real solutions. I discovered one workaround but I find it very annoying.</p>
  
  <p>The images load blurry on my Galaxy S3's default browser but in chrome &amp; firefox they load perfect without the workaround. The images are 2x already for high DPI screens so that's not the issue.</p>
  
  <p>The work around is placing any text in the a link. I put "."</p>
  
  <pre><code>&lt;a href="#"&gt;.&lt;/a&gt;
  </code></pre>
  
  <p>and making the font size very small.</p>
  
  <pre><code>#closeButton a{
  float:left;
  display:block;
  position:fixed;
  top:9px;
  left:10px;
  width:46px;
  height:44px;
  background:url(../img/camera/closeX@2x.png) 0 0 no-repeat;  
  background-size:46px 90px;
  text-align:center;
  font-size:1px;
  color:#FFF;
  }
  #closeButton a:active{
  background-position:0 -45px;    
  }
  
  &lt;span id="closeButton"&gt;&lt;a ontouchstart="" href="vibes.html"&gt;&lt;/a&gt;&lt;/span&gt;
  </code></pre>
  
  <p>Screenshot without workaround:
  <a href="http://igor2.com/blurry/no-text.png" rel="noreferrer">http://igor2.com/blurry/no-text.png</a></p>
  
  <p>Screenshot with workaround:
  <a href="http://igor2.com/blurry/with-text.png" rel="noreferrer">http://igor2.com/blurry/with-text.png</a></p>
  
  <p>Any help would be appreciated! I've been pulling my hair out trying to figure this out. There has to be a solution since facebook mobile and other mobile pages load nice crisp images/icons. Thank you!</p>