I'm using the :focus state to show content, when the parent element has focus. Like so:
.child { display: none; }
.parent:focus .child { display: block; }
Note that the parent element has tabindex="0" set. Is there a way to get this to work in iOS browsers? I'm asking to see if a CSS-only solution is possible, no javascript please.
I've set up a reduced test case fiddle here: http://jsfiddle.net/E8zCU/
An answer that worked for me for a similar problem is here.
As the poster in that thread said, you just have to add
<body ontouchstart="">
to the top of your html code.
Related
I'm using popup over whole screen. When popup is opened I set body and html CSS to overflow: hidden and prevent screen from scrolling. In all browsers working fine and on the android devices also, but the problem is on the iOS devices. I cannot stop scrolling on the ios devices.
<html style="overflow: hidden;">
<body style="overflow: hidden;">
<div class="popup" style="position: fixed;">
</div>
</body>
</html>
I need clean CSS solution for this. I tried already to add position: relative, position: fixed but it's not working.
Any solutions?
I had the same problem some days ago and I finally came up with this.
Well, there is a very simple solution to solve this problem... All you
have to do is set that element to have a relative position. For
instance, if you were to specify for the body to hide the horizontal
scrollbars you would want to have the following CSS in your
stylesheet:
body {
position:relative;
overflow:hidden;
}
OR
Another method is adding jQuery if above doesn't work
we can prevent swiping by using something like so:
$('body').bind('touchmove', function(e){e.preventDefault()});
And to re-allow swiping again (i.e. when a menu or full screen modal is closed):
$('body').unbind('touchmove');
Hope this helps you :)
Sorry my English. After some days , I found this solution, it worked for me!
position: touch-action: none;
-ms-touch-action: none;
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 have Ajax file upload control on an aspx page. The drag and drop zone of the control is visible on Chrome and mozilla but not on IE10. I understand that it should be visible on browsers which support HTML5 and CSS3. I believe IE10 has the support.
I went through the CSS and found this difference
<div class="ajax__fileupload_dropzone" id="ctl00_Mainform_AjaxFileUpload_Html5DropZone" style="width: 100%; height: 60px; visibility: visible;">Drop files here</div> (In Chrome)
<div class="ajax__fileupload_dropzone" id="ctl00_Mainform_AjaxFileUpload_Html5DropZone" style="width: 100%; height: 60px; display: none; visibility: hidden;"/> (In IE10)
In case of IE10, The display is set to none and visibility to hidden.
My question specifically is
At what point is this browser specific css rendered? so that I could get to why this is happening even when there is support for HTML5 and CSS3
I believe I cannot change this property in my code as it would be overwritten again in case of IE10.
EDIT:
I did try to edit the css by setting display to "block" and visibility to "visible". But this creates a disproportionate view with scroll bars which is not an ideal solution in my case
catch it with jquery.
// let the dropzone load first
setTimeout(function () {
$('.ajax__fileupload_dropzone').text('Drag Drop/Click');
if ($.browser.msie) {
$('.ajax__fileupload_dropzone').css({'visibility': 'visible','display':''});
}
}, 10);
this got it to show but it would not work right. I updated the toolkit from 15.1.2.0 to 15.1.3.0 and this seems to fix the problem. The odd thing is the night before I had no problems with IE.
According to this article http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/ one should be able to enable native-like momentum-scrolling like this:
body{
-webkit-overflow-scrolling: touch;
}
However, this doesn't change anything in my webapp. It scrolls the same with or without that property. I expected to have a longer momentum like native apps do.
I tested it on a scrollable DIV, which works - but I don't want to add any unnecessary markup just for this.
Any tips?
Further info
Ok, it "kind-of" works like this:
html, body {
height:100%;
overflow: scroll;
-webkit-overflow-scrolling: touch;
position:relative;
}
however, anything with position:fixed inside the BODY-tag moves while scrolling and re-attaches to it's correct position when scrolling stops. Is there something I can do to fix this?
Anyone having any input on this?
Fiddle:
http://jsfiddle.net/nMxEg/1/
Use a Div with a set height, and perform the scroll with touchscroll on the div. The header and footer can remain as fixed divs at an the same level in the DOM.
<div id="fixedheader"></div>
Unfortunately, iOS doesn't have full support for fixed.
http://caniuse.com/css-fixed
I have a jsfiddle to show what I'm trying to do: http://jsfiddle.net/n9bSC/3/
The jsfiddle works well and does not demonstrate the bug.
In my actual code, the transfer finishes directly below the target (instead of directly at the target).
I've tried removing the float, adding various "position" styles, etc.
Any thoughts on what could be causing the behavior that I've described?
I don't fully understand this, but I think the problem is fixed.
Our CSS had:
body{
position: relative;
}
So I now change that to "inherit" on the page where I'm doing the jquery-ui transfer effect.
Then, I use conditional CSS for only IE7 to do this:
.joyride-tip-guide {
margin-top: -10px;
}
(I'm using Joyride and noticed that changing the body position messed up the Joyride tour step positioning for Internet Explorer 7.)