I have my website and it looks great everywhere however I'm not a professional coder for Android. I do not know the extra quirks it has and I'm not sure hoe much I really need to know. Is there a way to single it out like in conditional comments for IE?
Here is my website and the banner and logo appear off to the left hand side of the screen. I have a Samsung Galaxy 3 and this is what my banner looks like on it.
Now I realize why this is happening, it's because they are both absolutely positioned and obviously the margin-left is making it go off screen. However I can't change that without destroying the layout for all the regular desktop browsers.
#site-title { background: url(img/heavensgate-logo.jpg) no-repeat; width: 229px;height: 297px; position: absolute; top: 0px; left: 50%; margin-left: -438px; z-index: 2; border: 0px; text-indent: -9999px; }
#banner { position: absolute; top: 165px; width:868px; left: 50%; margin-left: -448px; z-index: 1; padding: 15px; background-color:
#fff; border: 1px solid #b4b4b4; }
<h1 id="site-title"><span>Heavens Gate Winery</span></h1>
<div id="banner">
<img src="http://heavensgatewinery.ca/wp-content/uploads/banner8.jpg" style="position: absolute; visibility: hidden; top: 0px; left: 0px; border: 0px none;">
</div>
I'm confused as to how I should work with getting the banner and logo to work with Android. Any help is appreciated.
When you need to position elements with absolute positioning you should almost always do so inside a relative positioned element.
<div style="position:relative;"><div style="position:absolute;"></div></div>
Although this is not the problem described there, the Android browser has another issue regarding absolute positioning; absolutely positioned DIVs disappear. The solution Paweł Komarnicki found is -webkit-backface-visibility: hidden:
<div style="position: relative">
<div style="position: absolute; -webkit-backface-visibility: hidden">
</div>
</div>
My problem is in my Android (Samsung) that unless the other answers, left: in px gives the right position (absolute) but left: in % goes to position 0. Even e.g.
left: 10px;
left: 20%;
goes to position 0, calc() does not work either in left:, but works in width in a limited way.
So I think % does not work for left: in an Android. So I thought in the above problem left:50% was the problem, I am wondering it was solved with position relative / absolute. I did the same but no solution! No difference either when using -webkit-backface-visibility!
The solution: in stead of left: 17%, use left: calc(17%) and the other fixed px for left: are taken, but % does not work!!!
I did some testing that I suppose is relevant to this question. I wanted to center a SVG element inside a div.The code was not rendered correctly in Android 4.2.2. Now when I change translate to translate3d the problem is fixed. I've a made a piece of code that you can see both translate and translate3d side-by-side. My Android browser only renders the translate3d version correctly; possibly because of forced hardware acceleration. Note that I used a tiny Javascript code to copy the svg from one div to another. Here's the code snippet and the codepen:
Codepen: https://codepen.io/ehsabd/pen/yxOPOe
document.getElementById('test-translate3d').innerHTML = document.getElementById('test-translate').innerHTML;
#test-translate, #test-translate3d{
background: lightgray;
margin:20px;
float: left;
position:relative;
padding:100px;
}
#test-translate svg, #test-translate3d svg{
position:absolute;
width:100px;
left: 50%;
top: 50%;
}
#test-translate svg{
-webkit-transform: translate(-50%,-50%);
}
#test-translate3d svg{
-webkit-transform: translate3d(-50%,-50%,0);
}
<!--I've tested this on Android 4.2.2 native browser and I've seen that the first heart from left (which uses translate is not centered but the second heart (translate3d) is appropriately centered)-->
<div id="test-translate">
<svg
id="svg19871"
sodipodi:docname="remigho_like(paths).svg"
viewBox="0 0 604.96 556.17"
version="1.1"
inkscape:version="0.48.5 r10040"
>
<g
id="layer1"
inkscape:label="Calque 1"
inkscape:groupmode="layer"
transform="translate(-69.568 -427.74)"
>
<path
id="path18741"
sodipodi:nodetypes="csscssccc"
style="color:#000000;stroke:#000000;stroke-width:53.15;fill:none"
inkscape:connector-curvature="0"
d="m586.75 734.03c37.196-28.491 61.2-73.36 61.2-123.83 0-86.088-69.799-155.89-155.89-155.89-48.272 0-91.426 21.952-120.02 56.407-28.592-34.455-71.746-56.407-120.02-56.407-86.088 0-155.89 69.799-155.89 155.89 0 50.469 24.003 95.338 61.2 123.83l214.72 223.3z"
/>
</g>
</svg>
</div>
<div id="test-translate3d"></div>
Related
I have run into a very strange and incredibly annoying rendering bug in the Android WebView. I have tested this in a bunch of other browsers both on the computer and on my phone, and it does what its supposed to, but not in the WebView.
The blue box should be the same height as the header (30px) with text vertically centered in it, but instead, it is rendered as 25px. The only fix I've found, which doesn't make any sense, is to set the line-height of the blue box to 35px only on Android WebView, but this is a terrible hack.
css
body { margin: 0; }
#header {
height: 30px;
background-color: red;
position: absolute;
top: 0;
left: 0;
right: 0;
}
#button {
float: right;
line-height: 30px;
background-color: blue;
color: wheat;
vertical-align: middle;
}
html
<body>
<div id="header>
<div id="button"></div>
</div>
</body>
This is caused by the font boosting feature from webkit. There is actually a bug assigned to your problem: Bug 84186
Having the same problem as you, I actually created a javascript library that tries to fix the issue automatically. Be warned though, it's still in BETA status.
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.
I'm working on a project for a client and ran into an issue when testing the website on my Android device. Basically, I just want to center a DIV which wraps around most of the body content.
<img src="images/lightingOverlay.png" style="z-index: 1000; position: absolute; left: 0; right: 0; margin: 0 auto; top: 0;" />
<div style="border: solid 5px black; height: 50px; width: 978px; position: absolute; left: 0; right: 0; margin: 0 auto; top: 100px;" >
wrapped content!
</div>
I used inline styles for now. Even though the div and the image are using identical code, when viewing on the default Android browser, the image gets centered and the DIV doesn't.
I tried using a left: 50% positioning with negative margin equal to half the elements width as well, but that doesn't seem to work either.
Anyway, I've basically been playing with the code and testing it in Chrome v21 and Android for the last 2 days trying to figure out what the problems...and as you can see in the example, I've stripped down to the simplest elements without any luck. Anyone have any idea how I can get the horizontal centering to work in Android?
If you remove the position absolute, left, top & right bits of code you should be fine.
The DIV should only need margin:0 auto in order to be centered.
I would suggest not to use absolute in this instance and rather use margin-left:auto; and margin-right:auto;
<div style="border:solid 5px black; height:50px; width:978px; margin-left:auto; margin-right:auto; margin-top:100px;" >
wrapped content!
</div>
EDIT:
you can also try this implementation
<div style="width:100%; text-align:center;">
<div style="border:solid 5px black; height:50px; width:978px; margin-top:100px;" >
wrapped content!
</div>
</div>
>
Alright, centering works now after using
style="width: 1200px; position: absolute; left: 0; right: 0; margin: 0 auto; top: 0;"
The 1200px width here is the width of the large image overlay I'm using on the page, which also happens to the widest object on the page. It seems like the mobile browser takes the width of the widest element on the screen, and scales it so that this width is equal to the screen width. Then it does the rest of the rendering. If the screen is re-sized after that, apparently it doesn't bother re-positioning things?
Okay, so I'm not sure why this worked...just that it did. Hopefully it can help someone else who runs into the same problem.
I am developing an HTML5 web application for mobile devices and ran into a bit of trouble with smooth animations.
Essentially, when a user taps a button, a drawer (a div with height: 0px) should animate to a given height (in pixels) and content will be appended to that drawer. If you have a Pinterest account, you can see the animation as it is now, at http://m.pinterest.com (tap the Comment or Repin button).
The unfortunate problem is that on mobile devices, Webkit Transitions aren't hardware-accelerated the height property, so its extremely laggy and the animation is jagged.
Here are some code snippets:
HTML:
...
<div class="pin">
<a class="comment_btn mbtn" href="#" title="" ontouchstart="">Comment</a>
<div class="comment_wrapper">
<div class="divider bottom_shadow"></div>
<div class="comment">
<!-- Content appended here -->
</div>
<div class="divider top_shadow" style="margin-top: 0"></div>
</div>
</div>
<div class="pin"> ... </div>
CSS:
.comment_wrapper {
-webkit-transition: all 0.4s ease-in-out, height 0.4s ease-in-out;
position: relative;
overflow: hidden;
width: 100%;
float: left;
height: 0;
}
.comment {
background: #f4eeee;
margin-left: -10px;
padding: 10px;
height: 100%;
width: 100%;
float: left;
}
Javascript (using jQuery):
function showSheet(button, wrapper, height) {
// Animate the wrapper in.
var css = wrapper.css({
'height': height + 'px',
'overflow': 'visible',
'margin-bottom': '20px',
'margin-top': '10px'
});
button.addClass('pressed');
}
$('.comment_btn').click(function() {
showSheet($(this), $(this).siblings('.comment_wrapper'), 150);
});
Screenshots : http://imgur.com/nGcnS,btP3W
Here are the problems I encountered with Webkit Transforms that I can't quite figure out:
Webkit Transforms scale the children of the container, which is undesirable for what I'm trying to do. -webkit-transform: none applied to the children don't seem to reset this behavior.
Webkit Transforms don't move sibling elements. So, the .pin container after the one we're operating on doesn't move down automatically. This can be fixed manually, but it is a hassle.
Thanks a lot!
With mobile phones being so fast it's easy to forget they are actually pretty humble devices when you compare them to desktop hardware. The reason why your page is slow it because of rendering reflows:
http://code.google.com/speed/articles/reflow.html
When the div grows, it has to push and recalculate the positions of all the elements, which is expensive to a mobile device.
I know it's a compromise, but the only way you can make the animation smoother is by putting position: absolute on .comment_wrapper; or if you really want butter smooth animation, make it pop up from under the screen with css transforms, i.e.
.comment_wrapper {
height: 200px;
position: absolute;
width: 100%;
bottom: 0;
-webkit-transform: translate(0, 100%);
}
var css = wrapper.css({
'-webkit-transform': 'translate(0, 100%)'
});
You want traslate3d. Should use the GPU if the device supports it.
check this out...
http://mobile.smashingmagazine.com/2012/06/21/play-with-hardware-accelerated-css/
i added a div with a lot of data in it, and it works fine on a PC and on the Blackberry, but it doesn't work on Android: The data is retrieved with no problems but the div isn't scrollable.
Here is the HTML code:
<div id="scroll">
<div runat="server" ID="view"></div>
</div>
And the CSS:
#view
{
position: absolute;
top: 15%;
left: 0.9%;
width: 98.3%;
height: 75%;
font-family: Calibri;
font-size: 0.5em;
white-space: pre-wrap;
border: 1px solid black;
overflow: auto;
padding: 0.2em;
}
What is the problem?
If you're trying to do this on a native android application, you're going to have to implement a ScrollView:
http://developer.android.com/reference/android/widget/ScrollView.html
I found a creative work-around (that works on Android (2.3.5 Gingerbread) and Firefox browser for Android).
I didn't have the problem reported here on the first site I did but had issues on the second. After finding this answers here I remembered the old site worked so I checked what I did there. Copying over old to new site I was able to fix my problem...
This works on Android/Firefox browser but does not put a scroll bar indicator on screen (but touch-drag scrolls the content down the .
What WORKED for me is dual Tags... EMBED code to scroll in a second tag.
<div style="width: 100%; height: 100%; background-color:#fdc4f6; border: solid 1px #000;">
<div style="overflow:scroll; height:350px; text-align:left; padding: 1em 4em 0 4em;"> [Content will scroll if text overflows div on Android now]
then close DIV tags now the content in the second
may not be the prettiest code or method to use, but it got the job done for me (although I haven't tested in iOS devices).
For what it's worth...
-LB-
<div style="width: 100%; height: 100%; background-color:#fdc4f6; border: solid 1px #000;"><div style="overflow:scroll; height:350px; text-align:left; padding: 1em 4em 0 4em;"> [Content will scroll if text overflows div on Android now]</div></div>