Android Browser stretches image

Question

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;
}

Answer 1

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.

Answer 2

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.