CODEWITHSUNDEEP
androidhtmlcss
kia4567
kia4567

Reputation: 603

Fixing absolute positioning in Android

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.

enter image description here

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><a href="http://heavensgatewinery.ca/" title="Heavens Gate Winery" rel="home">Heavens Gate Winery</a></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.

Upvotes: 5

Views: 13994

Answers (4)

Ehsan88
Ehsan88

Reputation: 3781

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>

Upvotes: 0

Francois99
Francois99

Reputation: 73

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!!!

Upvotes: 0

ian.shaun.thomas
ian.shaun.thomas

Reputation: 3488

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>

Upvotes: 8

Simon A. Eugster
Simon A. Eugster

Reputation: 4264

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>

Upvotes: 7

Related Questions