I'm creating this toggle component but as you can see in the gif whenever I press it on a mobile device there's this flashing shadow behind it, which is probably some native behaviour to indicate the button is being pressed.
I'm trying to get rid of it as it makes the component look kinda clunky and not very smooth. I tried several combinations of props like changing the background color, shadow, transitions, pseudo selectors like :active and others, even changing the element from <button> to <div>, nothing really works and I couldn't find a solution for this anywhere.
Thanks in advance for any help!
Related
What is the background effect that appears on tap? In a webpage some <a>'s have a visual feedback when tap, but some others don't. On chrome for android it happpens in the form of a blueish background color for a few miliseconds.
Whatever it is, It's similar to :active, but not quite. As it seems not to be defined (as I checked in the inspector) and it only happens on tap (not desktop click).
Is there a way to make every element have it? The inconsistence is annoying.
From what i understand, given not much context, you'd want to reproduce the "ripple" effect. Which is like having some sort of wave of changing color from the position of the click.
I would suggest this tutorial to learn more how the effect is done in plain CSS.
http://www.cssscript.com/android-l-ripple-click-effect-with-javascript-and-css3/
I realized this is just the default styling that happens on the mobile browser for <a> elements.
The issue here was that the dimensions of the appearing box weren't matching those of the <a> element, but those of its inner (event target?) element.
In other words, in a given <a><i class="fa fa-icon"></i></a>. On tap, instead of getting a highlighted <a>, I was getting a highlighted <i>.
I am creating a simple mobile app with Cordova. For good user experience I would like there to be instant feedback whenever a user presses a button. This should be accomplished with the :active pseudoclass. It mostly works, but it's not quite 'instant'.
See the jsbin here.
With desktop Chrome, clicking the button produces absolutely instant feedback, no question.
With Chrome for Android, tapping the button quickly feels pretty quick, but a slow tap or holding on the button causes a delay (it might be hard to notice, but it is there and it's bugging me).
I think this is something to do with scrolling. If you go to the Android settings, there is a scrolling list of options. These options seem to highlight with a similar delay. However, any native Android buttons which are not within a scrolling list are absolutely instant (for example, the back button in the top right, or save/cancel on a popup dialog).
Is there some way I can convince Chrome that these buttons are not on any kind of scrolling pane and should just be highlighted instantly?
This is probably unrelated, but I have also noticed that holding on an html button highlights it, but then moving your finger (still within the button) causes the highlight to disappear. This does not match the behaviour of native Android buttons, which would stay highlighted so long as you stay within the button.
Edit: I should add that -webkit-tap-highlight-color (which only works with cursor: pointer) is a bit faster than :active, but it's not an acceptable solution, for a few reasons:
The highlight disappears if you hold on the button for more than one second
It clashes with :active - to get sensible results with -webkit-tap-highlight-color you would have to remove :active, which makes no sense
There is no way to control the size/shape of the highlight, which might not match the actual button (sometimes it bleeds around the edge, or has mismatching rounded corners)
The correct HTML way of solving this is :active, and I would like to use that if at all possible.
It seems the best way to solve this is to listen for touch events and set a class:
$('button').on('touchstart', function(e){
$(this).addClass('active');
});
$('button').on('touchend', function(e){
$(this).removeClass('active');
});
To keep this as closely related to the :active pseudoclass, I opted to use a class of active and add styles for both like this:
button:active, button.active {
// active style
}
For more information, see: http://samcroft.co.uk/2012/alternative-to-webkit-tap-highlight-color-in-phonegap-apps/
I have a bit of a IE8 problem (sound familiar?)
I have a button. when you hover over the button the hover state produces a larger box that has html inside. in this particular case, it's a small music player.
so it goes like this, when you hover over the button it produces a small music player with clickable links and some text. you can move your mouse anywhere inside this box, but as soon as you leave the box/music player, the hover state goes away again.
sorry but I don't know how else to explain it.
this all works a treat except for IE8.
in IE8, the hover state disappears as soon as the mouse leaves the original small button. so navigating around the music player becomes impossible.
now I have noticed that when there is no html in the hover box, it works fine, but when there is html (in this case an iframe) it loses the hover as soon as I touch any html inside the hovering box. so it looks like the problem is not the hover box, but the code inside the box that makes it lose focus
what I would like to know is, is this a known issue in IE8, or could it just be bad coding from my side. in which case i can post the css.
I've had problems with :HOVER states in IE8 too and I noticed that the same CSS (even pointing to the same external CSS file) worked on some pages but not others. The solution for me was to consistently add a DOCTYPE to the top of all pages (above the starting HTML tag).
It seems obvious now, but sometimes (especially when editing old sites) the DOCTYPE is not always specified.
I hope this helps!
Your problem doesn't seem to lie in hover itself. Firstly you assume some window height and your project just look weird if the height is different. Assuming you did some very exact calculations on such assumptions your problem is probably the box model problem. box-sizing:border-box might help, but you would have to recalculate everything.
Also you can use timeout before the elements gets hidden/drop down so that micro mouse movements don't shake elements and maybe allow to "catch" them.
Having both things in mind all hovering problems should be fixable.
EDIT: For iframe hover have a look at: Iframe hover not working in IE (all versions).
I'm playing around with apps on Phonegap, and ran into something that's bugging me.
When I put :hover on a class and change the background, it looks like a real button being pressed on a touchscreen, which is good, yeah.
But if I push the button, then slide my finger off the button (without actually clicking it), it still thinks I'm hovered over it so the background stays changed.
Is there another thing I can use besides :hover that won't stay? Only triggered when it's actually clicked?
Hopefully you get what I'm trying to explain.
You could try using the :active psuedoclass:
https://developer.mozilla.org/en-US/docs/Web/CSS/:active
So when I quickly move my mouse over an object, it wont fire it's animation, not until the user hold their mouse over that object for a specified number of ms. I don't believe this can be done with just CSS3, but maybe I'm wrong?
This effect is for if I have something like a bunch of links, and each link launched a little tooltip bubble, if the user moves their mouse across the screen to click on something, we don't want all of those tooltip bubbles to show.
Wow, this would be great! But it's not possible since you can't hold an animation with CSS3. Since you've hovered an element, all animations binded to it will be fired :S
Why don't you suggest it as a Chrome Feature?