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
Related
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;
}
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 have an element which I animte with translate3d transform. The parent element has overflow: hidden, but on Firefox Mobile 19.0.2 during animation the animated element is visible outside of the parent element.
Animating the top property instead of translate3d is working, but it's not hardware accelerated and it's not smooth enough.
It works fine on all other mobile and desktop browsers I tested on.
I guess this is a Firefox Mobile bug, but does anyone have a workaround for this?
Here is jsfiddle link for testing: http://jsfiddle.net/dioslaska/6h8qe/
The minimal test case:
HTML:
<div id="cont">
<div id="translate">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>
</div>
Css:
#cont {
width: 50px;
height: 90px;
border: 1px solid black;
margin: 20px;
overflow: hidden;
}
#translate {
-webkit-transition: all 1s ease-out;
-moz-transition: all 1s ease-out;
}
#translate.a {
-webkit-transform: translate3d(0, -60px,0);
-moz-transform: translate3d(0, -60px,0);
}
#translate div {
height: 30px;
line-height: 30px;
text-align: center;
}
UPDATE: It looks like the problem is solved in Firefox 27.
After a lot of searching I found a workaround here:
http://jbkflex.wordpress.com/2013/04/04/css3-transformations-showing-content-outside-overflowhidden-region-in-firefoxandroid/
Adding a background and opacity: .99 to the container element seems to solve the problem.
But still no information about what causes the problem
I tried the opacity: .99 hack but it was causing the layout to get pushed down..
so i tried another hack which i find that worked by applying this to your style sheet:
* {
outline: 1px solid transparent;
}
I'm sorry, but I seems found a more simple solution.
Without layout damage.
If scrolling container has height a more over than device height then this issue disappearing.
It's has a different values for portrait and landscape orientation.
It's really work with Sencha Touch 2 at FF v.23 on Android 4.0.4 for me.
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.
i am trying to get the following code to work on an androind 2.1 phone (HTC Sense UI):
h1 {
font-size: 14px;
font-weight: bold;
color: #FFF;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
however, the text-overflow property does not seem to work. has anybody else had this problem, or found a way to work around it?
on Android 2.2 and 4, I use a line height greater than the font size (always em) with a display type "-webkit-box" and a vertical orientation.
Here is an example:
.myClass{
display : -webkit-box;
-webkit-box-orient : vertical;
text-overflow : ellipsis;
-webkit-line-clamp : 3;
overflow : hidden;
font-size : 0.9em;
line-height : 1.2em;
}
I see you have no width defined. If the element is allowed to get arbitrarily wide there is never going to be any overflow >within> the element. The element overflowing its parent wil not give you the desired effect.
It seems that the 'ellipsis' is not working when your 'display' is set to '-webkit-box', reset to 'block' will do.
This may help: https://bugzilla.mozilla.org/show_bug.cgi?id=672944#c0