I have images in .png and .jpg displayed inside Lightview modals that turn out blurry on Android phones. iPhones are unaffected. The size of the modals and images are being automatically set by the view port size.
HTML (Lightview builds it dynamically)
<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 are dynamically set depending on viewport */
}
.lv_content {
position: absolute;
padding: 0;
margin: 0;
overflow: hidden;
background: url('somegif.gif');
display: block;
/* width, height, top, and left are dynamically set depending 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 are dynamically set depending on viewport in px */
}
I'm using MVC to give each image a source (src) because I have a different image depending upon what state they pick in the select. Otherwise, all CSS and HTML is created by Lightview.
I have looked through other posts like Blurry images on stock android browser because my issue is very similar, but I do not have any z-index or position: fixed set anywhere. My issue is produced on the Android default browser in version 4.0.4, 4.1.2, and 4.2.2 on both the Samsung Galaxy S3 and S4 (these details given to me by our testers).
I have tried overriding the Lightview CSS float to none for the class .lv_content_image and still no change in image quality.
I will post an example image when I can.
This is a strange bug with S3. Set these both on image tag would do the trick:
opacity: 0.999999;
-webkit-backface-visibility: hidden;
Unfortunately, the exact same method cause error on S4, and S3 and S4 have the same screen width/height, 320×640. So instead of writing pixel-accurate #media stylesheets, use:
var ua = window.navigator.userAgent.toLowerCase();
window.platform = {
...
isS3: ua.match(/gt\-i9300/i) !== null
}
if (platform.isS3) {
$('img').css{
'opacity': 0.9999,
'webkitBackfaceVisibility': 'hidden'
}
}
Related
The site I am talking about is currently live. It works quite well for me. There is just one mistake that drives me crazy:
On the standard Android Browser (tested on 4.1.2, LG), the logo is stretched and resized in a very bad way. You can see a demo below.
The CSS for positioning and sizing the logo is quite simple, using position: absolute on a position: fixed element:
Markup
<div class="fixed">
<div id="logo">
<a href="logo-link">
<img src="logo.jpg" height="55" width="34">
</a>
</div>
</div>
CSS:
* {box-sizing: border-box} /* bootstrap system */
.fixed {
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: auto;
height: 85px;
}
.logo {
width: 85px;
position: absolute;
top: 0;
left: 0;
right: auto;
bottom: auto;
}
img {
margin: 20px 27px;
max-width: 40px;
height: auto;
display: inline-block;
}
Working blind because I don't have that browser, but I suspect the issue will be the right:auto bottom:auto.
.fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 85px;
}
#logo {
width: 85px; height:85px;
position: absolute;
top: 0;
left: 0;
background-color:pink;
}
#logo a { display:block; width: 85px; height:85px; }
img { margin:15px 25px; }
Since the width is known, try replacing auto with the actual numbers.
Here is a Fiddle: https://jsfiddle.net/mnkx66zj/
You should also want to increase the clickable area on your link by making logo-link display block, and make it equal to parent size.
My FF DE44+ inspector says that the parent <a> is sized 0x24 and the <img> sized 240x164 (which are inline values). The parent has no z-index while the image has z-index: 1500.
It seems to me that the android browser has no width and height parent values it can reference while while the bottom: auto and right: auto forces it to do.
Further more, looking at the code of the 'live' site there is more to it than you are claiming in your question, because you give the values of the small image but the CSS of the big one (which also has left: auto, while the small one has no bottom, left, right at all).
You better take another good look at your code and revise the code in your question to reflect the code of the 'live' version, otherwise we will not be able to properly help you.
I have a responsive slider that we've built to handle product images. The images are of varying sizes - most respect our target aspect ratio, but there are images that don't both landscape and portrait.
The slider works everywhere apart from on Samsung devices in the default Android browser. The experience is common to tablets and phones, but only Samsungs. It works fine on other Android devices, the litany of desktop browsers and iOS.
The problem seems to boil down to a height: 100%; on the image which is used to limit portrait images to the height of the container. I've redacted our code down to the simplest version in the JSFiddle below.
JSFiddle: https://jsfiddle.net/g453xstc/8/
ul {
position: relative;
/* height 0 and padding top to maintain aspect ratio when resized */
height: 0;
padding: 75% 0 0;
}
li {
height: 100%;
width: 100%;
/* background to demonstrate how far the layout works on Samsungs */
background: #eee;
/* absolute positioning to account for height: 0 */
position: absolute;
top: 0;
left: 0;
}
img {
height: 100%; /* the offending line */
width: auto;
}
I revised the Google maps embed code to make it responsive to phones, thinking that that was the problem. However, after making it responsive, the map still doesn't show up on android or iPhone. The code is below. Could anyone help me figure out how to make it show up on phones?
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class='embed-container'>
<iframe src='https://www.google.com/maps/d/u/0/embed?mid=zxAFpdy2LkIo.kbe-u_jjzDKw' width='800' height='400'></iframe>
</div>
You need to reduce the size of your map. take out the size styling from the iframe and put it in a media query. if width and height are half of what they are now (i.e 400px and 200px ) it'll show up ok on phones - not iphones though, you'd have to go to 320px for apple)
Fiddle
I'm developing a website that has custom lightboxes. When the user activates a lightbox, there is a gray translucent div that comes behind the active lightbox. I've noticed on tablets (ios and android) there is about a 10 pixel margin on the right side where a scrollbar would be. I've tried the following CSS and it hasn't removed it:
#media (max-width: 767px) {
#gray_out {
margin-left: -20px;
margin-right: -20px;
}
}
html, body {
margin:0;
padding:0;
}
div, p, a, li, td { -webkit-text-size-adjust:none; }
Here is what it looks like on a desktop:
Here is what it looks like on a tablet:
Notice the bright yellow sliver.
The code for the div that provides the graying:
z-index: 99999;
background-color: rgba(0, 0, 0, 0.74902);
left: 0px;
right: 0px;
margin: 0px;
width: 802px;
height: 2034px;
position: absolute;
top: -0.00006103515625px;
The top value is generated with jQuery. Any advice would be greatly appreciated.
I can't provide a direct link to the site, and for this situation jsFiddle can't help because of the nature of the issue. Bear with me.
It seems obvious in hindsight, maybe there is a more elegant solution but eventually this is what I came up with:
#media (max-width: 1000px) {
#gray_out {
margin-left: -20px ;
margin-right: -20px;
width: 105%;
}
#home_footer, #home_header, #home_row_1, #home_row_2, #home_row_3 {
margin-left: -15px;
margin-right: -15px;
width: 102%;
}
}
Removing padding/margins wouldn't work, and that 10px sliver was actually interfering with more than the gray div, so I just made everything that much wider on mobile devices. I've tested it on a couple different versions of the iPad and a handful of Android devices on browserstack and it seems to be working well enough.
I am using phonegap to build android app. The problem right now I am facing is that when I scroll down in listview the tabs icon's border at the bottom becomes rough and deteriorated. Could someone help me out why this is happening and how to solve it? I am adding all the images using css.
Update
Here is my code
css
footer {
position:fixed;
width: 100%;
height: 60px;
bottom:0;
left:0;
padding: 0;
line-height: 100px;
z-index:2;
background: url(../../assets/img/tabbg.png) repeat-x;
}
footer ul {
list-style-type: none;
margin: 0; padding: 0;
text-align: center;
}
footer ul li {
display: block;
float: left;
width: 33%; line-height: 50px;
margin-right: 0.5%;
height: 58px;
text-align: center;
overflow: hidden;
}
footer ul li.one {
margin-left: 0.5%;
}
footer ul li a {
display: block;
text-decoration: none;
margin: 1px;
height: 100%; width: 100%;
}
footer ul li a.home {
background: url(../../assets/img/home3.png) center no-repeat;
}
footer ul li a.profile {
background: url(../../assets/img/camera2.png) center no-repeat;
}
footer ul li a.cam {
background: url(../../assets/img/profile2.png) center no-repeat;
}
Here is my html for tabs
<footer>
<ul>
<li class="one"></li>
<li></li>
<li></li>
</ul>
</footer>
Without seeing exactly the issue you're getting it's difficult to know if it's this however I'm having problems porting an App I built for the iPhone in PhoneGap to Android (still using PhoneGap).
I'm finding that using position Fixed causes issues and I've also had problems using width:100% (trying to cater for any-width phone) as opposed to a specific pixel value. Using overflow:hidden on whole-page divs also seems to be flaky.
I was getting display issues where elements would disappear and reappear. I'm still having problems using css rotate.
Using position:absolute and setting page-size div dimensions using window.innerWidth and innerHeight seems to cure things.
A bit non-specific I'm afraid but it may help..
I'd missed off the target-densityDpi field from the viewport metatag which appears to be crucial.
Leaving it out means the phone scales down everything by a factor of 1.5 I'm confused as to why unless background graphics dimensions cause this behaviour. I noticed window.innerWidth and window.innerHeight were reporting 320*533 instead of the actual 480x800 screen size.
While it looked fine I suspect the effort of scaling everything was taking too many resources - I was getting draw timeouts in LogCat - and I guess this caused the dropouts and flicker.
The scaling is also causing the rough edges. When static the phone anti-aisled the edges but when you drag an element its edges became pixelated.