jQuery Selectric bug on iPad - javascript

I use jQuery Selectric plugin for customize select's.
$('select').selectric({
disableOnMobile: false
});
If i open select on iPad device my left column move up
.left-column {
position: fixed;
left: 0;
top: 0;
width: 200px;
height: 100vh;
background: #F00;
z-index: 100;
}
Please, help with it. Demo here: http://output.jsbin.com/seleyi
UPD: test at browserstack iOS < 7 - no problem, iOS 8.3 - have some problem, iOS 9.1 have this bug

It's bug iOS 9, include in iOS 8, but in 9 version include partly.
Bug with input, with attribute readonly="readonly". Selectric use hide input:
What happen:
If click on selectric-wrapper start method _open.
Method _open set focus on hide input.selectric-input. It make selectric plugin and i don't know why. May be, more simple add listeners for keystrokes on a hidden element. And handle such events when an item has focus. Why input? If you use another element, then pressing the arrow keys, we will also scroll the document itself. Because, use input , although I could be wrong. Maybe better input for e-readers, ie, used it to enhance accessibility.
And when focus comes to input , despite the fact that it is readonly, iOS (I think so) tries to allocate space for the keyboard. I can advise a simple workaround:
$(".selectric-input[readonly]").on("focus", function(evt) {
this.blur();
});
Ie when the focus input immediately rid of him, because on iPads impossible to move through the list using the keyboard, the functionality should not be compromised.

Related

Input element click on mobile device browser behaves differently than in Chrome device rendering

I have a hard to debug issue where a click on an input element behaves completely different on my Samsung S10 than in my desktop Chrome browser (also when using device testing tools).
Here's how to test:
on a small mobile design (max-width: 56em) a blue filter bar appears at the bottom of the screen
Click it to show all filters, a popup menu appears (you can go back to results by clicking button "Bekijk resultaten")
Click "+ Specificeer" at the bottom of that screen
In the small range specification popup that appears click the first input element (placeholder="van")
In Chrome on desktop the user can now enter a number. Also when I use Chrome device debugging tools and set it to iPhoneX, Galaxy S5, Galaxy Fold rendering etcetera it works just fine.
But when I load my live site on my Galaxy S10 in the Chrome browser, the moment the user clicks the input element to enter a number, the rest of the filter popup menu is hidden, and it only shows part of the range specification popup. Scrolling of the page is completely disabled. I'm thinking that certain events are handled differently, but I can't figure out which ones and why.
I tried monitoring events using monitorEvents(window,"click");, but no click events show
Logged events via Performance tab, but could not find the culprit
I have no idea why anymore and I can't reproduce it in Chrome desktop browser to actually debug it.
UPDATE 1
The issue was the mobile virtual keyboard that trigger the resize method.
Fixed it by checking for width change:
var initialWidth = $(window).width(), initialHeight = $(window).height();
window.addEventListener('resize', function () {
if ($(window).width() != initialWidth) {//the width was changed
}
})
Well, I've played around. illusion is totally right.
I've copied some styles from .filters .mobile class to .filters_TEST
.filters_TEST{
&.active{
height: auto;
flex-grow:1;
overflow: auto;
opacity: 1;
z-index: 100;
padding: 0;
background-color: #FFF!important;
min-height: 100vh;
.modal_container{
background-color: #fff;
overflow: auto;
overflow-x: hidden;
position: relative;
width: 100%;
height: 100vh;
overflow-y: hidden;
#mobilefilters{
display:block;
}
}
}
}
added test button:
<span class="js-callmodal display-mobile-only">CALL MODAL</span>
and on button click added new class to .
$('.js-callmodal').on('click',function(){
$('.filters_TEST').addClass('active');
});
now when you click:
CALL MODAL -> Specificeer -> input
modal stays in place;
to truly fix your problem you should search what removes .mobile class when input is triggered.
I guess the code should be somewhere in file: _genfuncs.min.js?v=90
While debugging, I found that when the input is in focus and the keyboard pops up, that instant .mobile class is removed from section.filters. You'll have to see for any event handler that removes the .mobile class on any event. Secondly, after the bug was encountered I again added the removed .mobile class manually to section.filters and the modal was back in place working properly. After clicking "Specificeer" it gives rise to another bug, where the main page becomes unscrollable. Also at the same instant there is another error TypeError which could possibly be the cause of the other bug...

Disable IE 11 input clear 'X' button

I know this will be marked as a duplicate but every suggested CSS fix out there is not working for me in IE 11.
I am trying to disable an input clear 'X' in IE 11.
Among numerous others I have tried:
input::-ms-clear {
display: none;
height: 0;
width: 0;
}
or, if anyone can tell me how to get that to work that would also be acceptable, but I would rather have it gone altogether.
(adding my comment from above as an answer since it turned out this was the cause of OP's issue)
Your CSS is fine:
input::-ms-clear {
display: none;
height: 0;
width: 0;
}
<input type="text" />
There is no way to hide the X if the browser is running in Modern UI ("Metro") mode or if the page is rendering in Compatibility Mode.
So triple check that there's nothing in your markup that would cause the browser to use compatibility mode. If your users are using the Modern UI for some reason, there's not much you can do about that.
This works for me in IE 11 (IE 11 Document Mode)
::-ms-clear {
display:none;
}
It's slightly different than your selector which includes input. I don't see why that should make a difference, but you should try the selector as I have it (without any tag prefix).

How to disable scroll / scrolling on iOS devices (iPad, iPhone, Mac) with user-controlled toggle (enable / disable) [duplicate]

This question already has answers here:
ipad safari: disable scrolling, and bounce effect?
(22 answers)
Closed 5 years ago.
In reviewing the many questions and answers on this topic on StackOverflow, none of the solutions provided worked reliably. All CSS, JavaScript, jQuery and hybrid solutions had at least one deficiency that prevented the scroll from disabling and/or toggling effectively.
I've also searched the web high and wide and have not found a good answer.
So far I have this function:
function toggleScroll(btn, item) {
$(btn).click(function() {
$(item).toggleClass("noscroll");
});
}
...which will add a overflow: hidden; to any class I want onclick, and remove it on second click.
The thing is, this code doesn't work with iOS devices.
How could I make this work with iOS devices?
Ideally, I would prefer a pure CSS solution. But I understand that this may not be possible, especially the toggle component.
Any JavaScript or jQuery solution would be fine, as well.
Thanks in advance!
Disable Scroll / Scrolling on iOS Devices (iPad, iPhone, Mac) with jQuery
I think this gets you close to what you want. The only issue may be the toggle, which is two buttons (Enable and Disable). If you want to make the toggle a single button, maybe you can post a separate question or somebody else can improve upon this answer. (I'm mostly an HTML / CSS / PHP guy. I'm somewhat new to JS).
var disableScroll = false;
var scrollPos = 0;
function stopScroll() {
disableScroll = true;
scrollPos = $(window).scrollTop();
}
function enableScroll() {
disableScroll = false;
}
$(function(){
$(window).bind('scroll', function(){
if(disableScroll) $(window).scrollTop(scrollPos);
});
$(window).bind('touchmove', function(){
$(window).trigger('scroll');
});
});
credit: https://stackoverflow.com/a/17597303/3597276
Disable Scroll / Scrolling on iOS Devices (iPad, iPhone, Mac) with CSS
For a pure CSS solution to disable scrolling on iOS devices try these options:(Of course, these have no toggle.)
html, body {
position: fixed;
}
html, body {
position: relative;
overflow: hidden;
}
body {
position: fixed;
overflow: hidden;
}
body {
position: fixed;
height: 100%;
overflow: hidden;
width: 100%;
}
Here are some of the posts and articles I read on this issue.
Disable scrolling in an iPhone web application?
Disable all scrolling on webpage
iPhone Web App - Stop body bounce/scrolling in iOS8
ipad safari: disable scrolling, and bounce effect?
iPhone Web App - Stop body scrolling
iOS Safari – How to disable overscroll but allow scrollable divs to scroll normally?
Enable/Disable Scrolling in iPhone/iPad’s Safari
iOS prevent scrolling on body

Disable callout (context menu) on mobile IE

In a web app, I need to disable the default callout that mobile browsers shows when touching and holding ("long tap") on a touch target, such as an <img> or a link.
I am already using -webkit-touch-callout: none for iPhone and iPad. I tried -ms-touch-action:none and touch-action:none for IE, but this doesn't seem to work (tested on IE11, Windows Phone 8).
This post from the W3 mailing list suggests adding a listener for the "contextmenu" event in Javascript and calling e.preventDefault(). This does not seem to work either.
Any suggestions?
I did a bunch of research and as far as I can tell these are your two options:
Use a transparent <div> to cover the link/image
using a <div> with style="background: url(yourimage.png)" instead of <img src="yourimage.png">
The core problem is that mobile IE on Windows Phone doesn't properly handle preventDefault with contextmenu events. That is the proper way to do this and it works in every other browser. The contextmenu event is fired on WP IE but it actually happens when the long press context menu is dismissed. It should happen before even showing the menu so that you can prevent it.
Here are some of the other options I tried:
Events: I tried registering for every event and using e.preventDefault(), e.stopPropagation() and return false to prevent all of the default actions. JSBin example.
Use element:before or element:after to place an element on top of the link or image. I thought this might be able to automatically do what the transparent <div> does. Unfortunately the :before or :after content is part of the <a> so it is all clickable as well. Also, apprently <img> elements don't support :before or :after. JSBin example.
user-select: none
-ms-touch-action
-webkit-touch-callout: none
I even pinged someone on the IE team and he didn't know of a way.
I tried every "normal" or "elegant" option out there, but apparently IE11 mobile ignores every single one of them.
CSS properties: -webkit-touch-callout equivalent for IE
The preventDefault method Microsoft suggests: https://msdn.microsoft.com/en-US/en-en/library/jj583807(v=vs.85).aspx
Catching all touch events: Disabling the context menu on long taps on Android
A homebrewn oncontextmenu callback with stopPropagation and preventDefault
The only thing actually working is the old ugly div-over-image:
<div class="img-container">
<img src="path/to/image.jpeg" />
<div class="cover"></div>
</div>
CSS:
.img-container {
position: relative;
}
.cover {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

Want Focus, but don't want scrolling iPhone web-app

I am building an ios web app. I want to disable scrolling, so I used:
$(document).bind('touchmove', function(e) {
e.preventDefault();
});
and it works perfectly. However, now if the user taps on an input, it is not focused. "No big deal", I thought. This half fixes the problem:
$("div#searchBarView input").hammer().on("tap", function(){ //I'm using the hammer.js touch library.
this.focus();
});
So now the keyboard comes up, but no cursor or blue focus-haze appear. If I type, then no text appears. Any ideas how to get the focus, but keep the scrolling off?
Thanks!
-Sean
Rather than using JavaScript to prevent the scrolling, you might want to look at an alternative method, you should be able to prevent scrolling with pure CSS
html, body {
overflow: hidden;
height: 100%;
padding: 0;
margin: 0;
}
Then you can disable bounce with - How to prevent app running in phone-gap from scrolling vertically?

Categories

Resources