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.
Related
I have a mobile web chat app as shown screenshot
, I have a textbox at the bottom of screen which is in footer and on android browsers, the textbox is not coming up on focus whereas in ios its working fine. Can any one help. developement in ReactJs.
footer: {
zIndex: 2,
bottom: 0,
boxSizing: "border-box",
left: 0,
position: "absolute",
right: 0,
background: "#fff",
position: "relative",
padding: "0 10px",
boxShadow: "0px -1px 10px 0px rgba(0,0,0,.12)"
}
You have used the position property twice one is absolute and another is relative.
Try using only one value and see the result. Hope it will work.
I just used a simple logic by using jquery
Here I am Use HTML :
<div></div>
<footer>
<input type="text"/>
</footer>
Here I am use Jquery :
$(document).ready(function(){
$('div').click(function(){
$('footer').removeClass('make-top');
});
$('footer > input').click(function(){
$('footer').addClass('make-top');
});
});
Here the CSS :
div{
height:200px;
}
footer{
z-index: 2;
bottom: 0;
box-sizing: border-box;
left: 0;
position: fixed;
right: 0;
background: #fff;
position: relative;
padding: 0 10px;
box-shadow: 0px -1px 10px 0px rgba(0,0,0,.12);
transition:.5s;
}
#media (max-width:600px){
.make-top{
bottom:100px;// Mention the keyboard layout actual height.
}
}
Just take the keycode while the back button pressed : and remove this class via jquery..
I hope this will help.
Issues fixed. my main div when media max-width: 767px i was giving height 100% !important. this was stopping android webpages not to show textbox as the height was important and i removed it. but this was not causing issue in IOS browsers.
https://i.stack.imgur.com/SLPy5.png
A child div with "pointer-events: auto" does not receive any events when parent has "pointer-events: none" on mobile. Same thing works perfectly on desktop browsers. Why is that?
Here's my setup:
HTML
<div class="top">
<div class="top-content">
<p>top content</p>
</div>
</div>
<div class="bottom">
<div class="bottom-content-positioning-helper"></div>
<div class="bottom-content">
<p>bottom content</p>
</div>
</div>
CSS
.top {
width: 100%;
height: 300px;
position: absolute;
left: 0;
top: 0;
right: 0;
z-index: 500;
overflow: auto;
}
.top-content {
background-color: red;
width: 100%;
height: 600px;
text-align: center;
}
.bottom {
position: absolute;
top: 150px;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
overflow: auto;
pointer-events: none;
}
.bottom-content-positioning-helper {
background-color: yellow;
width: 100%;
height: 150px;
display: inline-block;
vertical-align: top;
opacity: 0.5;
pointer-events: none;
}
.bottom-content {
background-color: green;
width: 100%;
text-align: center;
display: inline-block;
vertical-align: top;
pointer-events: auto;
}
The two parent divs "top" and "bottom" with are stacked vertically. Both have a content div nested inside that is larger in height than their parent. As both parents also have "overflow: auto", they scroll their content. Nothing special until here.
When scrolling "bottom-content", it covers "top" until its middle and then crops any further scrolling.
In order to still be able to scroll "top-content" with a cursor in the lower half of "top", (while "bottom-content" is at scroll position 0), "pointer-events: none" and "auto" are used on "bottom" and "bottom-content".
Please check out my JSFiddle to better understand what's happening here.
Everything is working just fine on desktop browsers. But not at all on mobile. I tested it:
within a cordova app on iOS and android
on chrome and safari on iOS
on chrome on android
On mobile "bottom-content" is not scrolling, as it is not receiving any events. Even though, it is explicitly told to do so with "pointer-events: auto"...
Any hint much appreciated!
Ok, I still don't know why this is happening, but I found a way around it. I now read the touch events on the "bottom" element and reapply them to the scrollTop() property of THE SAME element via javascript. This sounds a bit weird, as this should be happening on its own, but it totally works! And the performance impact is minimal.
var lastScrollTop = 0;
var startY;
$(".bottom-content").on("touchstart", function(e){
//necessary for mobile browsers
startY = e.originalEvent.touches[0].clientY;
lastScrollTop = $(".bottom").scrollTop();
});
$(".bottom-content").on("touchmove", function(e){
//necessary for mobile browsers
var currentY = e.originalEvent.touches[0].clientY;
var scrollDistance = startY - currentY;
$(".bottom").scrollTop(scrollDistance + lastScrollTop);
e.preventDefault();
});
Here's the updated JSFiddle. Make sure to check it on desktop and on mobile again!
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'
}
}
The task is to display block at center horizontally and vertically inside other block. I use this code
<div class="parent">
<div class="child"></div>
</div>
.parent {
background-color: #AFAFAF;
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.child {
background-color: #FF0000;
bottom: 0;
height: 200px;
left: 0;
margin: auto;
position: fixed;
right: 0;
top: 0;
width: 200px;
}
and it works great on browsers and iOS devices, but this is the case in mobile android devices (not tablet): the inner div gets pinned to the top left corner, but when I inspect element using Adobe Edge Inspect I see that highlighted area for this inner div is displayed correctly. How can I fix this issue with centering on Android mobile? The size of inner block will change so the desigion should be universal.
I used to align div horizontally and verticaly the way you're doing but it seems like this technique is not really cross browser. Instead I took a look at the way Facebook was doing.
The demo on JsFiddle
The HTML :
<table>
<tr>
<td><div class="square">Some text</div></td>
</tr>
</table>
The CSS :
html, body {
height: 100%;
width: 100%;
}
table {
margin: 0px auto;
height: 100%;
}
.square {
width: 150px;
height: 150px;
background-color: red;
}
NOTE : I recently took a look and it seems like Facebook changed the way they do it. They are still using table display properties but no more the table, tr and td tag (div instead).
The easiest way with your markup is {left:50%;margin-left:-100px;}.
Then the same with height. {top:50%;margin-top:-100px;}
In summary:
.child {
background-color: #FF0000;
height: 200px;
left: 50%;
position: fixed;
top: 50%;
width: 200px;
margin: -100px 0 0 -100px;
}
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>