I have a problem when viewing this site with the latest Chrome for Android on my Stock Jelly Bean Gnex: http://kwitter.org/walialu/1340969834
It renders as it should be when loading the page. Then I flip my phone to change to landscape mode and it breaks the design. I need to refresh the page to let chrome re-rendering the page and then everything looks fine.
When viewing it on the stock Jelly Bean browser everything is rendering as expected.
The HTML for this site looks like this:
<!DOCTYPE html>
<html>
<head>
<title>Kwitter.org - Like Twitter with, but with more K!</title>
<meta charset="utf-8" />
<link rel="stylesheet" href="/_twitext/templates/default/template.css" type="text/css" />
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="HandheldFriendly" content="True" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script type="text/javascript" src="/gaia.min.js"></script>
</head>
<body>
<div id="topbar"></div>
<div id="content">
<div id="twitexts"><div class="twitext"><a href="/keanan"><div class="avatar" style="background-image: url('/_twitext/avatars/keanan.png');"></div></a> <div class="userdata"><a href="/keanan"><div class="name">Keanan Williams</div><div class="username">+keanan<span>@kwitter.org</span></div></a><div class="posted_via">via Android Mobile Web</div><div class="date"><a href="/keanan/1340969834">2012-06-29 13:37:14</a></div></div><div class="text">I can't wait to get butter on my Galaxy Nexus. It is so fucking awesome, but watch for yourself!
</div></div></div>
</div>
<footer></footer>
</body>
</html>
The CSS for this site looks like this:
html {
height: 100%;
}
body {
height: 100%;
margin: 0;
padding: 0;
background-color: #bbb;
color: #999;
font-size: 17px;
font-family: Verdana, Arial, Helvetica, sans-serif;
background: #C0DEED url("/_twitext/templates/default/bg.png") repeat-x fixed;
}
a {
color: #F92659;
}
kbd {
background-color:#f7f7f7;
border:1px solid #ccc;
border-radius:3px;
box-shadow:0 1px 0 rgba(0,0,0,0.2),0 0 0 2px #fff inset;
color:#333;
display:inline-block;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
line-height:1.4;
margin:0 .1em;
padding:.1em .6em;
text-shadow:0 1px 0 #fff;
}
.date a {
color: #666;
}
button {
position: relative;
display: inline-block;
overflow: visible;
padding: 5px 10px;
font-size: 13px;
font-weight: bold;
line-height: 18px;
cursor: pointer;
border-radius: 4px;
color: #CCC;
text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
background-color: #333;
background-repeat: no-repeat;
border: 1px solid #333;
box-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}
button:active {
color: #FFF;
text-shadow: 0 1px 0 rgba(100, 100, 100, .5);
background-color: #555;
background-repeat: no-repeat;
border: 1px solid #555;
box-shadow: 0 1px 0 rgba(100, 100, 100, .5);
}
input,textarea {
border: 1px solid #559;
border-radius: 10px;
font-size: 18px;
max-width: 100%;
padding: 10px;
background-color: #eef;
color: #000;
margin: 10px;
}
#post_window textarea, #edit_window textarea {
width: 546px;
max-width: 85%;
height: 200px;
max-height: 94%;
}
#post_window input {
width: 546px;
max-width: 85%;
}
.box-header {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
font-size: 18px;
margin-top: -1px;
padding: 5px;
color: #000;
}
div.overlay {
position: absolute;
z-index: 1000;
}
div.overlay.modal {
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
max-width: 100%;
text-align:center;
z-index: 1000;
background-image:url("/_twitext/images/overlay-bg.png");
}
div.overlay div {
position: absolute;
min-width:90px;
min-height:90px;
max-width: 96%;
padding: 0;
border: 1px solid #000;
border-radius: 10px;
background-color: #fff;
color: #000;
}
div.overlay div .window-destroy-button {
float: right;
margin-top: -5px;
background-color: #900;
color: #fff;
height: 32px;
width: 32px;
}
div.overlay div span {
margin: -1px;
border: 1px solid #000;
border-radius: 10px 10px 0 0;
background-color: #3287D0;
padding:10px;
display: block;
text-align: center;
}
div.overlay div div {
position: relative;
margin: 10px;
max-width: 100%;
background-color: #fff;
border-radius: 0 0 10px 10px;
text-align:center;
border: 0 none;
}
#topbar {
background-color: #222;
height: 42px;
margin-bottom: 10px;
}
#topbar div {
margin: 0 auto;
padding-top: 3px;
width: 576px;
max-width: 100%;
}
#content {
width: 96%;
margin: 0 auto;
}
#twitexts {
width: 100%;
}
#twitexts .twitext {
}
#twitexts .twitext .avatar {
display: none;
width: 96px;
height: 96px;
margin-top: 10px;
margin-left: 10px;
margin-bottom: 10px;
}
#twitexts .twitext .userdata {
padding: 10px;
margin-top: 10px;
max-width: 100%;
min-height: 86px;
border: 1px solid #999;
border-bottom: 0 none;
border-radius: 10px 10px 0 0;
background-color: #fff;
color: #000;
}
#twitexts .twitext .userdata a, #twitexts .twitext .userdata a:visited{
color: #000;
}
#twitexts .twitext .userdata .name, #twitexts .twitext .userdata .username {
float: left;
}
#twitexts .twitext .userdata .username {
clear: both;
margin-left: 20px;
}
#twitexts .twitext .userdata .posted_via {
padding-top: 10px;
clear: both;
color: #999;
font-size: 10px;
}
#twitexts .twitext .userdata .date {
clear: both;
font-size: 10px;
}
#twitexts .twitext .userdata .username span {
font-size: small;
color: #666;
}
#twitexts .twitext .text {
max-width: 100%;
padding: 10px;
border: 1px solid #999;
border-radius: 0 0 10px 10px;
background-color: #fff;
word-wrap: break-word;
color: #272822;
}
@media (min-width: 480px) {
#twitexts .twitext .avatar {
float: left;
display: block;
margin-left: 0;
margin-bottom: -30px;
margin-right: 10px;
}
#twitexts .twitext .userdata {
margin-left: 120px;
padding: 10px;
max-width: 100%;
display: block;
}
#twitexts .twitext .userdata .username {
margin-top: -30px;
}
#twitexts .twitext .text {
clear: both;
}
}
@media (min-width: 640px) {
#content {
max-width: 576px;
}
#twitexts .twitext .avatar {
float: left;
display: block;
margin-left: 0;
margin-bottom: 0;
margin-right: 10px;
}
#twitexts {
float: right;
width: 576px;
}
#twitexts .twitext .text {
float: left;
width: 538px;
}
#postbar {
float: left;
}
#twitexts .twitext .userdata {
float: left;
margin-left: 0;
padding: 10px;
width: 430px;
border-radius: 10px 10px 0 0;
}
#twitexts .twitext .userdata .username {
margin-top: 0;
}
#twitexts .twitext .userdata .posted_via {
clear: both;
margin-top: -40px;
float: right;
color: #999;
font-size: 10px;
}
#twitexts .twitext .userdata .date {
float: right;
margin-top: -20px;
font-size: 11px;
text-align: right;
}
}
Do you think this is a chrome for android specific rendering bug (because desktop chrome doesn't have this weird behaviour when resizing), or do you think I'm doing something wrong?
I guess it is a Chrome for Android specific rendering bug, because the Dolphin (HD) and the stock browser are not showing this weird behaviour (plus, after a full page reload everything is showing up as expected).