The images in my Lightview modals, displayed as .png and .jpg, appear blurry on Android devices but not on iPhones. The modals and images are automatically sized based on the viewport dimensions.
HTML (Generated by Lightview)
<div class="lv_window">
<div class="lv_content">
<div class="lv_content_wrapper">
<img class="lv_content_image" />
</div>
</div>
</div>
CSS
.lv_window {
position: absolute;
top: 50%;
left: 50%;
padding: 0;
overflow: hidden;
text-align: left;
-webkit-tap-highlight-color: rgba(0,0,0,0);
display:block;
/* Width, height, top, and left adjust dynamically based on viewport */
}
.lv_content {
position: absolute;
padding: 0;
margin: 0;
overflow: hidden;
background: url('somegif.gif');
display: block;
/* Width, height, top, and left adjust dynamically based on viewport */
}
.lv_content .lv_content_wrapper {
float: left;
clear: both;
position: relative;
}
.lv_content_image {
float: left;
border: 0;
clear: both;
padding: 0;
margin: 0;
background: none;
/* Width and height adjust dynamically based on viewport in pixels */
}
I assign a source (src) to each image using MVC depending on the selected state. All other CSS and HTML is generated by Lightview.
I've reviewed similar issues like Blurry images on stock android browser, but I don't have any z-index or position: fixed set. The problem occurs specifically on the default Android browsers version 4.0.4, 4.1.2, and 4.2.2 on Samsung Galaxy S3 and S4 (as reported by our testers).
I attempted setting float: none for the .lv_content_image class in Lightview's CSS, but it didn't improve the image quality.
I will provide an example image as soon as possible.