I'm trying to use hardware acceleration in a phonegap application. I have read that I have to put a css 3dtransform for this pourpose. So, I have used a webkit-transform3d in the main class of my html element, but I continue to see some lag during the animation.
I want to open and close a box, settings is height from 0 to somevalue and viceversa.
I have write an example here: http://jsfiddle.net/VG7V5/6/
As you can see, I have defined the class container in this way:
#container {
box-shadow: 0.1em 0.1em 0.2em 0em #777777;
width: 100%;
max-height: 15em;
overflow-y: auto;
transform: translate3d(0em,0em,0em);
-webkit-transform:translate3d(0em,0em,0em);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
}
If I open the example with my Nexus 5 with Android 4.4.2 I see some lags during the animation, with or without the transform3d enabled (infact in jsfiddle it starts with the transform commented). It seems as nothing change.
Is there something wrong???
Thx
Maybe I have found the solution by myself.
As explained in this article
is possible to achieve high performance animations if they are of these types: position, scale, rotation or opacity.
Essentially the animation should not change the dimensions of the element, because it causes too much overhead for the cpu/gpu.
So, changing the height of the element, as in my example, is not a great idea. :D
Related
I'm trying to create a scrolling effect for a background using CSS3 animations, such as:
body {
background: url("bg.jpg") repeat-y 0 0;
animation: animatedBackground 50s linear infinite;
}
#keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 0 100%; }
}
(JSFiddle)
This works great, except that it's very laggy on mobile devices (e.g. Android Chrome 43.0)). I've tried various hacks that are suppose to force the browser to use the GPU, which sadly didn't help.
One solution is to use translateY and duplicate the image, like shown here. That doesn't feel very good however, since the image is pretty big to start with. It does run smooth, though.
I'm looking for alternate solutions on how to make this run smooth.
The reason that transform runs smoothly while background-position does not is that transform can utilize the phone's hardware acceleration while background-position must rely on the browser software's re-rendering of the element. Even if it's a large image, using hardware acceleration is always better for mobile.
If it's the same image, any browser worth it's salt isn't going to incur any extra impact by using it twice, as it's cached after the first pull.
So use the transform solution, and feel confident it's the right one.
Inspired by the link in the OP, I found a way to achieve this without having multiple references to the same image. It does, however, require you to know the image's height.
The general idea is to have a relative wrapper which hides all overflow, and force the image to be 200% its height, and make it repeat and finally animate the y-axis -100%. Example:
#parallax-wrapper {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
#parallax-background {
position: relative;
width: 100%;
height: #parallax-image-height * 2;
background: url("/bundles/sunnerbergsimilarseries/images/tv-show-wall.jpg") repeat 0 0;
animation: animatedBackground 50s linear infinite;
transform: translate3d(0, 0, 0);
}
#keyframes animatedBackground {
0% { transform: translateY(0) }
100% { transform: translateY(-#parallax-image-height) }
}
(JSFiddle)
The above runs as smooth on a 2015 Android-phone as on a computer with a dedicated graphics card.
I have a problem with a web application. I have these CSS rules to make sure that if text is overflowing it will be shown with three dots. It works perfectly on all browsers that I have tested(desktop and mobile). One big except is android stock browser and more importantly only RTL mode (I have attached an image of the rendered output).
display: inline-block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
The output should be Option 1, Option 2 and so on. There is enough space to fit this small text there but is cut off.
I have tried to use text-rendering: optimizeLegibility option and it helps in some cases but not all.
Does any one have any ideas what might be a solution for this problem?
Thank you for your time!
Although my site isn't the best, it's a mash of HTML and isn't even responsive, it works as expected in every browser except for the Android Browser. I have a secreenshot below of the select box in the android browser, and then in every other browser. I'm really not sure how to approach this as I generally work things out in the end with trial and error, and like I said my code really isn't that good!
Any help would really be appreciated :) thanks very much.
Android (using www.modern.ie to test):
Other browsers:
The CSS for the select box:
#form .input-select {
background: url(../images/field-bg.png) repeat-x;
height: 30px;
width: 210px;
border: 1px solid #c2c2c2;
border-radius: .2em;
font-size: 14px;
padding: 5px;
-webkit-appearance:menulist;
Form elements are among the most unreliable parts of HTML/CSS regarding cross-browser rendering consistency. Especially some properties of the box model (height in conclusion with border or padding) are troublesome.
Citing from that article:
Developers tried to fix this problem by turning these elements [input, select] into block-level elements. [...] A common pattern to solve this problem is to avoid the height property and instead to use the font-size and padding properties.
A great CSS collection to start with is normalize.css. You should think about using (parts of) it, to get as much rendering consistency as possible.
You are already using em as unit for border-radius, for scalability in older browsers, especially IE 6-8, you could go for ems for all length units.
I've forked your fiddle, to include those ideas. See http://jsfiddle.net/Volker_E/4v3sm71g/
By the way, Chrome v36.0.x on Android 4.4 doesn't show a difference at all per default.
#form .input-select {
? float:right; ?
clear:right;
}
#form label {
? float:left; ?
clear:left;
}
I am using a default custom skin 'GHD' folder (which is not responsive) have downloaded the blanco theme, which is under 'GHDNew' folder, This is where the style.css is based and the responsive media queries.
I am using trying to style the Iphone but cannot get the portrait to work to fit the width of the device. The width is long, I can't explain it but have a look here ghd.ecommerceit.co.uk. The Landscape is working fine.
none of the page is actually fitting, and I'm having to use margins to bring everything in but struggling. Also it's my first time trying to make it responsive. Can anyone advice what I can use to bring different elements in and make them fit according to device width? i.e. Search, Navigation, Logo, Header Links, Body etc...
I don't want to use Margins but in the interim, it's working.
Mayur
The (or at least one) reason this does not fit is
.page {
position: relative;
width: 100%;
min-width: 750px;
min-height: 100%;
}
in your style.css
Check out a css framework for responsive design, like bootstrap or pure css.
You do not have a viewport meta tag in your header, try adding
<meta name="viewport" content="width=device-width, initial-scale=1">
In case your example page is ghd.ecommerceit.co.uk (without www), the (or at least one) problem is
#wrapper {
width: 1004px;
margin: 0px auto;
overflow: hidden;
text-align: left;
}
in your all.css
I have some CSS and HTML where the font-size is explicitly styled to be 13px, and for the most part it stays that way, but occasionally Chrome on the Nexus 7 sometimes displays a part of the same page as 14px;
Unfortunately, I have been unable to recreate the issue in jsfiddle, so I'm not sure what is going on.
Some if the styles I use to influence the font-family and font-size can been seen at my attempt to recreate the issue at http://jsfiddle.net/K9hyG/2/.
When using the Chrome debugger, I can see the following in the Computed Style for one of the offending paragraphs:
border-collapse: separate;
color: rgb(51,51,51);
display: block;
font-family: Optima, Lucia, 'MgOpen Cosmetica', 'Lucida Sans Unicode', sans-serif;
font-size: 14px;
font[size="2"] - 13px default.aspx:427
body - 13px default.aspx:2
height: 36px;
text-align: left;
text-shadow: rgb(255,255,255) 0px 1px 0px;
width: 877px;
The text-shadow is generated by my usage of jQuery Mobile. In the Chrome debugger, two instances of the text-shadow directive appear. One inherited from div.ui-page.ui-body-c.ui-page-active (ui-body-c is the activating component) and the other from body.ui-mobile-viewport.ui-overlay-c, (ui-overlay-c is the activating component), but both definitions from the same section of CSS in the theme file.
If I deactivate one of them, the offending paragraph actually changes to 13px in Chrome Debugger, but still looks the same on the device. If they are both deactivated in Chrome Debugger, then it goes back to 14px. This still happens, even if the text-shadow set to rgb(255,255,255) 0px 0px 0px.
I've seen this post, but that issue is largely unresolved as well.
A colleague of mine has discovered the answer. It looks like I am the unwitting victim of Font Boosting
As per the link, Font Boosting can be disabled by providing max-height: 1000000px on the element in question or on body, body * for all elements.
Your problem is likely due to Chrome's text scaling setting, which sets text at a particular scale for accessibility reasons. A lot of users use this who struggle to read small text on their mobile. You cannot fix this and shouldn't try to resolve it, especially with sites that support mobile devices.
I recommend you either ignore it or modify your CSS so that it supports slightly differing text sizes.
After some tests this rule helped me out. Must be added either to the element containing boosted text or it's parent depending on the div/table structure.
element or parent element {
/* prevent font boosting on mobile devices */
width: 100%;
height: auto;
min-height: 1px;
max-height: 999999px;
}
Maybe the width and heigth values must be corrected according your needs.