When I try to use background-color: rgba(233, 233, 227, 0.72); on a mobile device (or Tablet) with Android, a problem occurs:
As you can see in the picture above, there is a horizontal line between the two divs. This problem only appears on Android devices: Android or Chrome browser.
On a desktop computer this code works fine.
If you want to try it:
http://jsfiddle.net/karmany/1y10cn0j/
Is this a bug on Chrome and Android browser?
Code:
.bckg {
background-color: blue;
}
.div-top, .div-bottom {
height: 50px;
background-color: rgba(233, 233, 227, 0.72);
background-clip: border-box;
width: 100%;
display: block;
padding: 0;
border: 0;
margin: 0;
box-shadow: none;
}
<div class="bckg">
<div class="div-top"></div>
<div class="div-bottom"></div>
</div>
It is definitely a bug in Chrome browser for Android. I've reported this issue: https://code.google.com/p/chromium/issues/detail?id=524068
Related
I have scoured the web for simple ways to make a progress bar on a website that is consistent across all browsers. I have achieved this for PCs by using elements instead of the progress element and thought all was well until I looked at the website on my android phone using chrome browser app.
It would appear that Chrome for Android does not support this code?!
Can someone point me in the right direction to get this to appear correctly?
#percent {
background-color: black;
border-radius: 10px;
padding: 3px;
color: yellow;
height: 38px;
}
#inner {
background-color: white;
border-radius: 8px;
height: 100%;
width: 100%;
float: right;
}
#bar {
background-color: cyan;
border-radius: 8px;
text-align: center;
line-height: 38px;
color: blue;
height: 100%;
float: left;
}
<br><br><br>
<div id='percent'>
<div id='inner'>
<div style='width: 63%;' id='bar'><b>63% Full (1354.3 GiB Free)</b></div>
</div>
</div>
I tested the code using the (desktop) chrome device emulator and it runs fine on all sorts of devices. This does, however, not emulate the chrome app for android or IOS, but the aspect ratio of the device does not influence if the nested <div> renders or not.
I hope this gives you some insight into your problem.
P.S. Did you check if your chrome version is up-to-date? It might run an outdated version of html/css
This issue i am facing while making android build for ionic app.
Though i have tried many suggestion which got through these following links . couldn't able to fix this . Can any1 suggest me some more suggestion . Any help i would appriciate .
https://github.com/driftyco/ionic/issues/4928
Make scrollbar visible in ionic content when using native scroll
try this. put this classes on the css file:
::-webkit-scrollbar {
-webkit-appearance: none;
}
::-webkit-scrollbar:vertical {
width: 11px;
}
::-webkit-scrollbar:horizontal {
height: 11px;
}
::-webkit-scrollbar-thumb {
border-radius: 8px;
border: 2px solid white;
background-color: rgba(0, 0, 0, .5);
}
::-webkit-scrollbar-track {
background-color: #fff;
border-radius: 8px;
}
.overflow-scroll {
overflow-y: auto !important;
}
To correct my Ionic scroll bar woes, I added the following CSS and HTML. It's presently working in my android App.
In html file I added following contents:
.theroot {
height: 250px;
background-color: #F5F5F5;
}
<ion-content>
<ion-scroll direction="y" class="theroot">
<div>
</div>
</ion-scroll>
</ion-content>
In style.css added following code
.theroot {
height: 250px;
background-color: #F5F5F5;
}
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 have the following HTML markup:
<div class="news_detail">
<span class="newspaper_icon"></span>
<span class="small_story_newspaper">Sky News</span>
</div>
and the following CSS applied:
.news_detail {
width: 33%;
float: right;
margin: 5px 0px;
text-align: center;
}
.newspaper_icon {
width: 17px;
height: 17px;
float: right;
margin: 0px 5px;
background: url("images/Mobile/hdpi.png") no-repeat scroll 0px -342px / 215px auto transparent;
display: inline-block;
}
.small_story_newspaper {
float: right;
font-size: 12px;
color: rgb(41, 169, 224);
}
It works perfect on all but android devices with Kitkat.
Any ideas?
I know that on Kitkat the WebView is using chromium now. Does chromium has issues with <span> that I need to know?
My guess would be that inline-block is not supported on mentioned device. Try display block with float. Also kitkat is only running on 1% of android devices, so I wouldnt bother
I am building a menu for my site to target mobile devices, and my default Android browser is acting very funny. I've stripped everything down to bare minimum, and as basic as i could to test everything out.
I am using jquery's .Toggle function to have my menu appear and disappear. It functions perfectly. Just as intended in all browsers. I went to test it on my mobile device and it worked / looked perfect in Firefox. Then I went to test it in the default Android browser. To my dismay there was a problem.
When you click the div that toggles the menu to make it appear the div moves to the left leaving a gap on the right side of the menu. What is funny is that I have a div inside of the menu container that retains its 100% width, and extends to the far right side of the screen. The css for the div inside of the menu div has practically the exact same css. So I am so confused as to why it is retaining it's 100% width but not my div that appears when toggled. Does anyone have any ideas? Below is a screen shot of the issue and my code.
html
<div id="mobilemenu">
<ul>
<li>Home</li>
<li>Random</li>
<li>Submit</li>
</ul>
<div id="mobilemenu-catdrop">
Categories
</div>
</div>
<script>
var flip = 0;
$("#click").click(function () {
$("#mobilemenu").toggle( flip++ % 2 == 0 );
});
</script>
css
/* header */
header {
background: #2e97de;
width: 100%;
height: 45px;
border-bottom: #287eb9 1px solid;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
display: block;
}
/* mobile menu */
#mobilemenu {
border-top: #8dc8f2 1px solid;
width: 100%;
background: #2e97de;
display: none;
}
#mobilemenu ul {
}
#mobilemenu li {
display: block;
}
#mobilemenu li a {
padding: 10px;
color: #95d3ff;
display: block;
text-decoration: none;
}
#mobilemenu-catdrop {
width: 100%;
background: #1e6291;
color: #FFF;
padding: 10px;
display: block;
}
This is happening because the div #mobilemenu-catdrop is actually beyond the width of #mobilemenu since you're using padding with 100% width. use the border-box you're using on the header with that div instead:
#mobilemenu-catdrop {
width: 100%;
background: #1e6291;
color: #FFF;
padding: 10px;
display: block;
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
-moz-box-sizing: border-box; /* Firefox, other Gecko */
box-sizing: border-box; /* Opera/IE 8+ */
}