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.
Related
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 trying to set a background image for an spn web app and I need the background to be fixed (that it won't be scrolled with the rest of the page).
this is the body css:
body {
background-color: rgb(51, 102, 102);
background-image: url('../images/background.png');
background-attachment: fixed;
background-position: center;
color: #eee;
}
Safari in IOS and Chrome on Android repeat the background instead of fixing it at one point.
I've seen on the internet it's been disabled on mobile but is there a solution?
background-repeat: no-repeat;
background-position: center center;
There are other options to doing this but this is the only one that actually worked for me; and i tried just about all of them.
You set the div just below the initial tag. Then apply the image to the html within the div. Give the div and id attribute as well (#background_wrap in this case).
...I tried this without applying the actual image link within the html and it never worked properly because you still have to use "background-image:" attribute when applying the image to the background within css. The trick to getting this to work on the mobile device is not using any background image settings. These values were specific for my project but it worked perfectly for my fixed background image to remain centered and responsive for mobile as well as larger computer viewports. Might have to tweak the values a bit for your specific project, but its worth a try! I hope this helps.
<body>
<div id="background_wrap"><img src="~/images/yourimage.png"/></div>
</body>
Then apply these settings in the CSS.
#background_wrap {
margin-left: auto;
margin-right: auto;
}
#background_wrap img {
z-index: -1;
position: fixed;
padding-top: 4.7em;
padding-left: 10%;
width: 90%;
}
So I'm still new to the whole css and div thing, pardon my bad coding. :/ Anyways, I have finished a site but oddly the side navbar does not appear on mobile browsers such as Chrome and the default android one. Any ideas as to why? All help is appreciated.
http://escobarboxing.com/
Also, I've tested it on my Desktop via Chrome, FF, and Opera and it appears to be working fine but another user using Chrome said he did not see it?
Yep, that's because of this: #menu{position: absolute;}
Because the position is absolute, and the main content is centered, when you get to a small screen size, the menu goes behind the content. You can experiment with this just by resizing your screen really narrow.
For a quick fix, remove the position: absolute, which will fix your problem, but here's what I recommend:
Remove position absolute and relative from #menu and #container. Remove Margin right and left: auto from #container, then float #container left (float:left;). Finally, apply the auto left and right margins to #site (you'll need to specify a width first, looks like 920px should work). The #menu will stay next to the #container, and both will be centered with regards to the page.
For good measure, I'd add a 100% height and width div (#wrapper) above site.
Also, side note, if you put "position: absolute;" on anything, it's removed from the 'flow' of elements, so margins won't affect it. Here's a great article that helped me figure out position: http://www.barelyfitz.com/screencast/html-training/css/positioning/
Welcome to CSS! It's fun, and sometimes aggravating. I hope you enjoy.
Try using %'s instead of fixed widths. What's happening is on smaller screens the menu is covered by your content block because the block is to big for the screen. To see what I mean open the site with your smartphone then adjust the size of your container down. You will see your menu appear when you refresh. I have firefox on this laptop and the menu doesn't show for me either.
You should try adding the menu div to container and remove position absolute.I see too many divs so try using less divs. why do you need that cssmenu div?
<div id="container">
<div id="menu">
<div id="cssmenu">
</div>
</div>
<div class="insta">
</div>
rest of content
</div> end container
.insta {
color: #333333;
width: 100%;
margin-left: auto;
margin-right: auto;
-webkit-border-radius: 7px;
-moz-border-radius: 7px;
border-radius: 7px;
-moz-box-shadow: 0 0 10px 0 #000;
-webkit-box-shadow: 0 0 10px 0 #000;
box-shadow: 0 0 10px 0 #000;
background: #EDEDED;
float:right;
width:770px;
}
#container {
overflow: auto;
height: auto;
width:920px;
margin:0 auto;
}
#menu {
float: left;
margin-top: 25px;
}
Hope this answer helps.
I am using phonegap to build android app. The problem right now I am facing is that when I scroll down in listview the tabs icon's border at the bottom becomes rough and deteriorated. Could someone help me out why this is happening and how to solve it? I am adding all the images using css.
Update
Here is my code
css
footer {
position:fixed;
width: 100%;
height: 60px;
bottom:0;
left:0;
padding: 0;
line-height: 100px;
z-index:2;
background: url(../../assets/img/tabbg.png) repeat-x;
}
footer ul {
list-style-type: none;
margin: 0; padding: 0;
text-align: center;
}
footer ul li {
display: block;
float: left;
width: 33%; line-height: 50px;
margin-right: 0.5%;
height: 58px;
text-align: center;
overflow: hidden;
}
footer ul li.one {
margin-left: 0.5%;
}
footer ul li a {
display: block;
text-decoration: none;
margin: 1px;
height: 100%; width: 100%;
}
footer ul li a.home {
background: url(../../assets/img/home3.png) center no-repeat;
}
footer ul li a.profile {
background: url(../../assets/img/camera2.png) center no-repeat;
}
footer ul li a.cam {
background: url(../../assets/img/profile2.png) center no-repeat;
}
Here is my html for tabs
<footer>
<ul>
<li class="one"></li>
<li></li>
<li></li>
</ul>
</footer>
Without seeing exactly the issue you're getting it's difficult to know if it's this however I'm having problems porting an App I built for the iPhone in PhoneGap to Android (still using PhoneGap).
I'm finding that using position Fixed causes issues and I've also had problems using width:100% (trying to cater for any-width phone) as opposed to a specific pixel value. Using overflow:hidden on whole-page divs also seems to be flaky.
I was getting display issues where elements would disappear and reappear. I'm still having problems using css rotate.
Using position:absolute and setting page-size div dimensions using window.innerWidth and innerHeight seems to cure things.
A bit non-specific I'm afraid but it may help..
I'd missed off the target-densityDpi field from the viewport metatag which appears to be crucial.
Leaving it out means the phone scales down everything by a factor of 1.5 I'm confused as to why unless background graphics dimensions cause this behaviour. I noticed window.innerWidth and window.innerHeight were reporting 320*533 instead of the actual 480x800 screen size.
While it looked fine I suspect the effort of scaling everything was taking too many resources - I was getting draw timeouts in LogCat - and I guess this caused the dropouts and flicker.
The scaling is also causing the rough edges. When static the phone anti-aisled the edges but when you drag an element its edges became pixelated.
I have my website and it looks great everywhere however I'm not a professional coder for Android. I do not know the extra quirks it has and I'm not sure hoe much I really need to know. Is there a way to single it out like in conditional comments for IE?
Here is my website and the banner and logo appear off to the left hand side of the screen. I have a Samsung Galaxy 3 and this is what my banner looks like on it.
Now I realize why this is happening, it's because they are both absolutely positioned and obviously the margin-left is making it go off screen. However I can't change that without destroying the layout for all the regular desktop browsers.
#site-title { background: url(img/heavensgate-logo.jpg) no-repeat; width: 229px;height: 297px; position: absolute; top: 0px; left: 50%; margin-left: -438px; z-index: 2; border: 0px; text-indent: -9999px; }
#banner { position: absolute; top: 165px; width:868px; left: 50%; margin-left: -448px; z-index: 1; padding: 15px; background-color:
#fff; border: 1px solid #b4b4b4; }
<h1 id="site-title"><span>Heavens Gate Winery</span></h1>
<div id="banner">
<img src="http://heavensgatewinery.ca/wp-content/uploads/banner8.jpg" style="position: absolute; visibility: hidden; top: 0px; left: 0px; border: 0px none;">
</div>
I'm confused as to how I should work with getting the banner and logo to work with Android. Any help is appreciated.
When you need to position elements with absolute positioning you should almost always do so inside a relative positioned element.
<div style="position:relative;"><div style="position:absolute;"></div></div>
Although this is not the problem described there, the Android browser has another issue regarding absolute positioning; absolutely positioned DIVs disappear. The solution Paweł Komarnicki found is -webkit-backface-visibility: hidden:
<div style="position: relative">
<div style="position: absolute; -webkit-backface-visibility: hidden">
</div>
</div>
My problem is in my Android (Samsung) that unless the other answers, left: in px gives the right position (absolute) but left: in % goes to position 0. Even e.g.
left: 10px;
left: 20%;
goes to position 0, calc() does not work either in left:, but works in width in a limited way.
So I think % does not work for left: in an Android. So I thought in the above problem left:50% was the problem, I am wondering it was solved with position relative / absolute. I did the same but no solution! No difference either when using -webkit-backface-visibility!
The solution: in stead of left: 17%, use left: calc(17%) and the other fixed px for left: are taken, but % does not work!!!
I did some testing that I suppose is relevant to this question. I wanted to center a SVG element inside a div.The code was not rendered correctly in Android 4.2.2. Now when I change translate to translate3d the problem is fixed. I've a made a piece of code that you can see both translate and translate3d side-by-side. My Android browser only renders the translate3d version correctly; possibly because of forced hardware acceleration. Note that I used a tiny Javascript code to copy the svg from one div to another. Here's the code snippet and the codepen:
Codepen: https://codepen.io/ehsabd/pen/yxOPOe
document.getElementById('test-translate3d').innerHTML = document.getElementById('test-translate').innerHTML;
#test-translate, #test-translate3d{
background: lightgray;
margin:20px;
float: left;
position:relative;
padding:100px;
}
#test-translate svg, #test-translate3d svg{
position:absolute;
width:100px;
left: 50%;
top: 50%;
}
#test-translate svg{
-webkit-transform: translate(-50%,-50%);
}
#test-translate3d svg{
-webkit-transform: translate3d(-50%,-50%,0);
}
<!--I've tested this on Android 4.2.2 native browser and I've seen that the first heart from left (which uses translate is not centered but the second heart (translate3d) is appropriately centered)-->
<div id="test-translate">
<svg
id="svg19871"
sodipodi:docname="remigho_like(paths).svg"
viewBox="0 0 604.96 556.17"
version="1.1"
inkscape:version="0.48.5 r10040"
>
<g
id="layer1"
inkscape:label="Calque 1"
inkscape:groupmode="layer"
transform="translate(-69.568 -427.74)"
>
<path
id="path18741"
sodipodi:nodetypes="csscssccc"
style="color:#000000;stroke:#000000;stroke-width:53.15;fill:none"
inkscape:connector-curvature="0"
d="m586.75 734.03c37.196-28.491 61.2-73.36 61.2-123.83 0-86.088-69.799-155.89-155.89-155.89-48.272 0-91.426 21.952-120.02 56.407-28.592-34.455-71.746-56.407-120.02-56.407-86.088 0-155.89 69.799-155.89 155.89 0 50.469 24.003 95.338 61.2 123.83l214.72 223.3z"
/>
</g>
</svg>
</div>
<div id="test-translate3d"></div>