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.
Related
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;
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
Here is plnkr example.
Basically there is a style like that
.hover-block {
-webkit-transition: all 1s linear;
transition: all 1s linear;
}
.hover-block:active {
pointer-events: none;
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
.hover-block:hover {
-webkit-transform: scale(1.5);
transform: scale(1.5);
}
I'm seeking to support evergreen and IE10/11, Chrome for Android (4.4+), Mobile Safari (iOS 7+), and it shouldn't hurt other touch events (swipe scrolling).
It seems to work as intended on Android and Chrome device emulation, non-sticky transform on touch is desired behaviour.
But somehow this plunker doesn't work on iOS webkit (iOS 8, all browsers), it does nothing on touch. I'm quite sure that exactly the same approach (block element, :active with pointer-events: none plus :hover) worked for me in iOS 8 before. How can it be fixed?
It looks like empty touchstart/touchend JS event handler or ontouchstart/ontouchend attribute can activate touch behaviour on iOS (can't be sure but it is possible that it happened to me before). Is it a known fix for the problem or there are less hacky ones, which iOS versions are affected?
In your html, instead of <body>, do <body ontouchstart="">
Or in html5, just <body ontouchstart>
So the issue you're running into is this: "The :active pseudo class matches when an element is being activated by the user". A standalone <div> element cannot be activated by the user and therefore will not be matched by the :active pseudo class.
If you look under Browser Compatibility in the :active MDN article you'll see that:
[1] By default, Safari Mobile does not use the :active state unless there is a touchstart event handler on the relevant element or on the <body>.
MDN has a list of pseudo classes that can be used and you might be able to find one that better fits your situation or adding a touchstart event should do the trick in Safari.
I was able to get your plnkr working really quick by changing the <div class="hover-block"></div> element to <button class="hover-block"></button> and changing .hover-block:active { to .hover-block:focus {. I also added display: block; border: 0; to .hover-block.
You, for obvious reasons, may not want to change your <div> to a <button> to get your effect to work, but by using an element that can be activated, using a different pseudo class, or adding an event that allows activation in your target browser, you should be able to achieve the effect you're looking for on mobile devices.
Hope that helps!
I've been given a design to implement which has a lightbox which has some content inside which includes links. This is all fine and working except for when it comes to iOS where it's not possible to interact with the content of a lightbox if its position happens to be on top of a video.
It's acting as though the video is on top of the lightbox content - even though it's behind. The issue occurs even with extremely simple barebones HTML.
Stripped back HTML:
<video id="home_video" controls preload="none" poster="http://www.videojs.com/img/poster.jpg" width="500">
<!-- video sources -->
</video>
<!-- positioned over the video -->
<div id="lightbox">
Not touchable on iOS
Touchable because it's not over a video
</div>
Associated stripped back styling:
#lightbox {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255,255,255,0.5);
}
#lightbox > a {
display: inline-block;
background: red;
padding: 20px;
}
#touchable {
margin-top: 400px; /* taller than video */
}
I've put together a jsfiddle example. It includes some JS which alerts when you've successfully clicked/touched a link. On desktop browsers it's possible to click both links, on iOS it's only possible to click the second.
It might be worth noting that the issue occurs whether the lightbox is pre-opened on page, or after being explicitly opened as in this jsfiddle
I can think of a number of ways of hacking around the problem - such as moving the video off screen, replacing it with its poster image, or by transforming the video using translateX to hide it, but I'd prefer to leave the video where it is, if possible.
Has anyone stumbled across this issue before and found a solution? Any pointers?
This is a quirk of Mobile Safari, where it intercepts all touch/click events for elements on top of a video element, regardless of z-index or DOM order, only when the controls attribute is set.
So the solution is to remove the controls attribute and implement your own custom controls wit Javascript. You can use existing open source players to provide these controls for you (e.g. jPlayer, videojs, etc.), but you need to be careful because some of them have a special case for iOS where they will just use the native player controls. I think this is because it's simpler than making those mouse-centric controls work with the quirks of iOS (like touch and lack of volume control). So you need to check the documentation to see if there's a flag to force the player to use its own controls rather than the built-in ones.
Considering this proof of concept, would it be possible to animate margin-left (both negative and positive values) through JavaScript?.. And how would you go about doing so?
Note: I know this is WebKit-only. And I'm fine with that, seeing as I am developing for iOS Safari.
Update
Thanks for the answers, but jQuery's animate function doesn't support pure CSS animations, which is what I need.
I know that you specifically say "can you do this in JavaScript", but you shouldn't need to use JavaScript. I'm fairly certain that the proof of concept you link to only uses jQuery as a way to make the animations fall back to JavaScript so that all browsers play nice with the animation. Since you're specifically developing for Mobile Safari, you shouldn't need to use jQuery for this except to use a history plugin to push and pop states to make the browser's back button work; this is entirely doable via CSS transition properties and the :target pseudo-selector.
So as an alternative, you should be able to do something like this:
In HTML:
<div id="thing-that-will-transition">
<a href="#thing-that-will-transition>click this to transition the div</a>
</div>
In CSS:
#thing-that-will-transition
{
(bunch of properties)
-webkit-transition: margin-left [the rest of your transition values]
}
#thing-that-will-transition:target
{
margin-left: [your properties]
}
As long as your fragment URL matches up with the name of the element that you want to transition then you should be able to push the fragment in to the URL using JavaScript if you absolutely have to instead of using anchor with a fragment href while still having the transition take place. And if you use a jQuery history plugin or do your own pushing and popping of the history stack then you still get back-button behavior for your app.
I know you specifically asked for a JavaScript solution to trigger the CSS animation, but I'm just not sure why this is what you need. Sorry if this doesn't help you at all.
UPDATE: Here's a jsFiddle demonstrating the above. It uses this jQuery history plugin to manage the history stack, so that you can still get acceptable back/forward button behavior from the fragment URL's. The anchor tag uses the plugin's "push" or "load" method in its onClick with a standard fragment in the href attribute as a fallback for browsers without JS enabled.
UPDATE 2: Here's another jsFiddle that uses transforms/translations instead of transitions.
UPDATE 3 (by roosteronacid):
And as for getting the animations going through JavaScript, you can do:
var element = document.getElementById("...");
setTimeout(function ()
{
element.style.webkitTransitionDuration = "0.3s";
element.style.webkitTransitionTimingFunction = "ease-out";
element.style.webkitTransform = "translate3d(300px, 0, 0)";
}, 0);
You can set a transition in css3, and then subsequent changes to the element will be animated.
.MY_CLASS {
-moz-transition: all 0.3s ease-out; /* FF4+ */
-o-transition: all 0.3s ease-out; /* Opera 10.5+ */
-webkit-transition: all 0.3s ease-out; /* Saf3.2+, Chrome */
-ms-transition: all 0.3s ease-out; /* IE10 */
transition: all 0.3s ease-out;
}
This specifies a nearly cross browser (damn IE) transition that applies to all css changes, lasts 0.3 seconds and eases, so it will slow down towards the end of the transition. Therefore, to animate it to the left/right, simply change the css:
$(".MY_CLASS").css("margin-left", "-300px");
Note this will animate it to a fixed position of 300px, if you want to animate to a position relative to its current location use:
var mleft = $(".MY_CLASS").css("margin-left");
var newleft = mleft.substr(0, mleft.length-2) + 50;
$('.MY_CLASS').css("margin-left", newleft+"px");
See a working example here (jsFiddle)
Better use transitions, that are almost cross-browser supported (except IE), and set the keyframes through JS.
This works using CSS, HTML and WebKit only:
#wrapper {
width: 700px;
text-align: left;
border-radius:10px;
-moz-border-radius:10px;
border-style:solid;
border-width:1px;
border-color:#ccc;
padding:30px 30px;
-moz-box-shadow: 0px 0px 5px #BBB;
-webkit-box-shadow: 0px 0px 5px #BBB;
box-shadow: 0px 0px 5px #BBB;
-webkit-transition-property: -webkit-transform, margin-left;
-webkit-transition-duration: 3s;
-webkit-transition-timing-function: ease-in;
-webkit-transform: translate(100px);
}
Just make a <div id="wrapper">Placeholder text</div> in an HTML file to test it out. Worked for me in Google Chrome 12.0.742.112 and Safari 5.0.5 (6533.21.1). If it doesn't do the animation right away, it may be due to your browser processing the translation too quickly (or caching, perhaps?). You might consider adding a delay somehow. I just pressed the refresh button a few times really fast. Worked for me.
Edit:
Check out the source behind girliemac's test page. Some insightful stuff there. Also see this SO post.
you can use jqueries .animate() - http://api.jquery.com/animate/
Check my example - http://jsfiddle.net/ajthomascouk/jS83H/ - Press the + and -
Animating css margins with jQuery works like this:
$( '#mydiv' ).animate({
'margin-left': 'new margin value'
});
To use webkit's css animations, you'd create a class that has the transform property, then you can use jQuery to add/remove said class as needed.