In mobile Chrome there are faint lines at the edges of backgrounds and border-images as seen in this screenshot (bottom of bricks and around the inside of green header.)
I've seen it mentioned on SO that backgrounds that get repeated (in my case the image has repeat-x) but I haven't seen the border-image case mentioned (in the screenshot the border has green in it then the background-color is set to the same green.)
Has anybody worked around this? I recently installed Android 4.4 on my phone and this bug goes all the way back to then. Thanks!
EDIT:
Here's the CSS for those elements:
#content { /* div the background is on */
background-image: url('/media/top.png');
background-repeat: repeat-x;
background-position: left top;
}
h1 { /* headings (green boxes */
border: 30px solid transparent;
border-radius: 10px;
padding: 0px;
background-color: #25552e;
border-image: url('media/border.png') 33.3% round;
color: white;
}
Related
Before anyone thinks this is a simple question or is a possible duplicate, please read the full post.
I'm developing an Android application and have implemented a WebView to act as part of the application. The WebView shows content from a website which is made with bootstrap and is mobile friendly. However, the CSS messes up here and there and as a result, the entire application looks odd and elements seem to be 'out of place'.
For example, I place a box and some text inside a container and place it specifically using CSS margins. Like below:
.testcontainer {
border: 1px solid red;
height: 50px
width: 100%;
}
.testcontainer .box {
height: 50px;
width: 50px;
background-color: blue;
display: inline-block;
vertical-align: top;
}
.testcontainer .text {
font-size: 16px;
display: inline-block;
vertical-align: top;
border: 1px solid blue;
}
<div class="testcontainer">
<div class="box"></div>
<div class="text">Testing</div>
</div>
Now all is good on a MacBook Safari and Opera browser and the text's border is pixel perfect and is aligned with the top of the blue box etc. However, on the WebView inside the application, the text is around 2px off and in some cases, 5px and so on. Why? I've tried to use em instead of px for font-size but the same issue occurs. What am I missing?
I've been trying to fix this bug for days, yet I didn't find a single solution.
On certain levels of zoom (even on my phone with default zoom) I can see grey borders below some divs. I've been trying to fix this with A LOT of options including:
box-shadow
margin-bottom
outline: none
... and some other ones which I don't even remember anymore
The issue can be seen here.
PICTURE LINK
It's visible on the top of the triangle.
The whole code is available here:
https://noobish.eu/beta/
I went through your website (BTW great design) and i think i figured out a solution for your issue. You need to add a negative margin to the triangle to cover the space:
.white_triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 130px 50vw 0 50vw;
border-color: white transparent transparent transparent;
margin-top: -5px; /* Here's the addition */
}
Update:
The margin-top solution seems to be buggy, so I found another solution, which would require adding a before element on top of the border. Here's the code:
.white_triangle_container:before {
content: "";
position: absolute;
width: 100%;
height: 8px;
background: #fff;
margin-top: -4px;
border-radius: 0 0 50% 50%;
}
This is how it looks: https://i.gyazo.com/25db9e4b9db16c42d374cfd78b47736d.png
I'm developing a web based app. I load a page on an android WebView.
The issue is, I set a wave border effect to a div using css3 radial gradient, the page shows correctly on most browsers, and works fine for iOS version app as well. But on the android app, If I add this style, the page will totally become blurred. I paste my css code here:
wave-l:before{
display: block;
position: absolute;
content: '';
top: 0px;
left: -4px;
height: 100%;
width: 4px;
background-position: 0px 0px;
background-size: 4px 8px;
background-image: -webkit-radial-gradient(100% 4px, circle, $color 4px, transparent 4px);
background-image: -moz-radial-gradient(100% 4px, circle, $color 4px, transparent 4px);
background-image: radial-gradient(circle at 100% 4px, $color 4px, transparent 4px);
}
This css will generate a left wave style border. The blurred pages shown on android WebView is as shown below:
I'm quite sure it's this css code snippet caused the issue. So anybody know the solution?
Add the code
android:hardwareAccelerated="false"
in the AndroidManifest.xml webview used activity.
It is too late to respond, but I was also getting the blurred issue in webView. I resolved it by adding
webView.getSettings().setJavaScriptEnabled(true);
It may help somebody
I created simple Qt iu form in Qt Designer. I thought it is kind of WYSIWYG editor for Qt, but I'm starting to think it's more like WYSITUTWYG.
Jokes aside, I am trying to use CSS as much as possible so that we can quickly change design once we have an idea that doesn't look like crap. This is the CSS, which is applied to MainWindow:
* {
margin: 0;
padding: 0;
}
QWidget {
background-color: black;
color: white;
font-family: Arial;
}
*[class="h1"] {
color: yellow;
background-color: rgb(50, 191, 12); /* light green*/
font-size: 15pt;
padding: 6px 8px 6px 8px;
}
QPushButton {
background-color: rgb(50, 191, 12); /* light green*/
color: black;
padding: 2px 5px 2px 5px;
}
*[class="datapointWidget"], DataPoint {
border: 1px solid white;
}
I am using custom dynamic property to use [class="h1"] selector. This one thing actually works really well.
This is the result:
As you can see we have some problems here:
padding has no effect at all
magically, yellow border appeared around headings
buttons did show green background but still also render natively
DataPoint widget has no border
One thing that actually holds well is the weird right margin - the one thing I hoped was just a Designer visual bug, but actually appears in the program.
I want to make gradient text only with css3 or html5 working on Android. I tried with css3 but on android there's a little problem. I tried this http://nicewebtype.com/notes/2009/07/24/pure-css-text-gradient-no-pngs/. Here's how it looks like in android http://img121.imageshack.us/img121/5014/androidw.png . Can somebody tell me how to fix it, or another way to do it, no matter with css3 or html5 canvas?
header h1 {
position: relative;
display:inline-block;
margin-top: 0px;
background: rgba(0,0,0,0);
margin: 23px 0 0 77px;
}
header h1 a {
color: #fff;
position: absolute;
background: rgba(0,0,0,0);
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,1)),to(rgba(0,0,0,0)));
}
header h1:after {
content: 'Company name';
background: rgba(0,0,0,0);
text-shadow: -1px 1px 2px #232323;
color: #dadada;
}
It could be a browser issue.
Here is a link to a cross-browser css gradient generator.
Try creating any gradient and try it. If it works, then it's a browser issue.
Here is the link: CSS Gradient Generator
Let me know if it sorts the problem for you.