I am currently developing an html5 app that will be displayed through an iOS webview. In order to use hardware-acceleration of the iPad, I have applied
transform: translate3d(0,0,0);
to all elements that are animated. This works fine and I can see the difference, however, whenever en element has an opacity transition (ie; fade in / fade out), it is still quite choppy, even though the element has translate3d applied. Am I doing something wrong or is there a different approach to optimize opaicty transitions for iOS?
probably using this:
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
Related
I am developing an application in Cordova, where the user can switch between a few 'screens', which are just hidden divs brought into view by a transition.
The scrolling on iOS has been terrible, so I added -webkit-overflow-scrolling: touch to the container element and it sorted out the scrolling issue I had.
However, since then the page transitions cause the pages to flash each time the application moves to a new page.
Here is my CSS
.scrollable {
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
Once a button is pressed to proceed to the next page it uses this javascript code for the transition
this.lastScreen.getLayout().getElement().css({
'left': -$(window).width(),
'transition': 'left 0.25s ease-out'
});
this.currentScreen.getLayout().getElement().css({
'left': 0,
'transition': 'left 0.25s ease-out'
});
<div class="container scrollable">
//screen content here
</div>
If I remove the -webkit-overflow-scrolling: touch; from the scrollable class it works fine, no flash happens. However, the scrolling of the page is terrible.
I am running iOS 9.3.1. I read around and found out this may have been an issue from iOS 8+ but can't really find a difinitve answer to help me
I suggest you to use native transitions with cordova´s app.
http://plugins.telerik.com/cordova/plugin/native-page-transitions
Add this CSS to the classes that have transitions:
-webkit-transform: translate3d(0px,0px,0px);
It just force hardware acceleration, so it become smoother than the normal one, and probably fix your issues
I have an app / site where I'm using -webkit-overflow-scrolling: touch; to make the scrolling smooth on iOS.
However, recently it started causing my navbar disappear upon initial load (using iOS) and it only appears when certain elements were scrolled up or down, it makes the navbar completely unusable.
If I comment out the -webkit-overflow-scrolling: touch; then it works perfectly but the momentum scrolling is gone. I've tried adding a z-index hack to the navbar to make sure it's loading on top of everything, I've added a few different display properties as well to see if I could hack the -webkit-overflow-scrolling: touch;, I've even tried adding the items into memory using -webkit-transform: translate3d(0,0,0);, and nothing is working. The navbar still disappears / glitches out no matter what when -webkit-overflow-scrolling: touch; is included.
Has anyone had this glitch before and figured it out? I really don't want to load an entire JS library just to handle my scrolling, but I might have to if I can't figure this glitch out. The non-momentum scrolling feels so clunky and unusable.
I had the same problem. I had a list of items with -webkit-transform: translate3d(0,0,0); that were not showing as soon as I enabled -webkit-overflow-scrolling: touch;. My problem was that I had the elements with -webkit-transform: translate3d(0,0,0); nested inside another div.
In other words, there was a div in between the one with the overflow-scrolling: touch and the children with the translate3d. Didn't realize they had to be direct children.
Once I consolidated my divs directly it stopped hiding the elements and worked perfectly. Hope it helps.
I had the same problem. In my case I was trying to use ::before to display an overlay. I worked on Chrome, but not in Safari/iPhone. I end up not using it in the end, I replace it with ::after
I'm trying to have a snippet of text "zoom & fade in" once the page is loaded. To do so, I'm creating a div with the text inside and setting it to transform immediately:
.whatIwantZoomed {
opacity:0;
/* Vendor Prefixes here */
transform:scale(4,4);
/* Vendor Prefixes here */
transition:transform 1s, opacity 1s;
}
Now, when called from my Javascript function, an animated class is applied which reduces the scale to (1,1):
.whatIwantZoomed.animated {
opacity:1;
/* Vendor Prefixes here */
transform:scale(1,1);
}
Now, on mobile Safari (both iOS 7 & iOS 8), the effect actually does work. The problem is the scaled text is actually larger than the width of the viewport, causing it to 'resize' and zoom the page out. As the animation occurs, the page resizes back to how it should be.
What I'm trying to do here is remove this unwanted viewport width alteration. I've tried setting the body to have a property of overflow-x:hidden; to no avail, and I can't seem to get the viewport metatag to help me either.
Can anyone shed some light on a solution here? Thanks.
EDIT: Added a fiddle demonstrating this. Notice the scrollbars in the HTML frame? That's what I'm trying to prevent.
Try this
DEMO
div {
text-align:center;
background-color:red;
transform-origin: 50% 50%;
transform:perspective(1200) scale(1);
animation:animated 1s ease-in-out;
}
#keyframes animated{
from{transform:scale(10);opacity:0}
}
For anyone coming across this, it seems to be related to this bug
The root cause is things that are off screen incorrectly trigger safari (or wkwebview) to resize the viewport.
Add this to your viewport meta tag:
shrink-to-fit=no
We've built an HTML5 app for the ipad that uses Webkit transforms and transitions for animations. In the past we have had to use -webkit-transform: translate3d(0,0,0); to enable hardware acceleration to prevent animations from flickering and to appear smooth. We have updated to iOS 6 and this technique no longer seems to work. Is there a new way to invoke hardware accelation in iOS 6 for animations?
Try this:
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
Apple has changed safari in iOS6, so that using translate3d doesn't automatically trigger GPU acceleration. I think people are playing with different approaches right now to figure out how to make this happen.
I ended up fixing this by applying translate3d(0, 0, 0) to every element inside of what I was transforming.
.content * { -webkit-transform:translate3d(0,0,0); }
I am using css3 for "button", It is running well on every browser but it's showing different in iPad. I think it takes the default properties of iPad so I apply
"-webkit-appearance:none;" but it is not working.
My CSS Properties are - background:#1356b4; border:solid 1px #0e4189; border-radius:5px; transition:all 0.3s ease-in-out; -webkit-appearance:none;.
And html code is simple span class button and input.
Please help me if someone having any solutions.
By adding -webkit-appearance: none; we are telling mobile Safari that we explicitly don’t want our button to be styled like a native Apple UI control.