Scrollbar click makes div disappear IE9+ / Windows 8 - javascript

Because there are a couple of skinned select boxes on my site, I am using dropkick.js, which essentially replaces the select boxes with interactive divs. If the list is larger than the max-height, the overflow-auto makes scrollbars appear. It works fine on Firefox, Chrome and Safari.
On Windows 8 + IE9 & IE10 a scrollbar appears, but when I click or try to drag it, the div hides!
> Link to the page
I have only found a slightly similar issue on a Bootstrap UI combobox but that script did not work for me, because dropkick.js does not use Bootstrap and adapting the script did not solve the problem.
> Link to similar bug
I was hoping it could be fixed with stopPropagation on the div but no luck on that either. Tried -ms-overflow-style:scrollbar but that does not change the behaviour.
Has anyone stumbled across a working fix for this in IE9+?

I had the same problem last week on one of my projects.
I solved it by changing the "click" event for closing the dropdown to "mousedown".
For some strange reason IE9+, on Windows 8, considers the scrollbar outside of the DOM element for click and mouseup events but for mousedown event it accepts the scrollbar as part of the DOM element.
By the way, I tried to reproduce the bug on your site but couldn't(Tested on IE10/Windows 8).

Related

Chrome 39 Bug - Input select() breaks scrolling

I have an HTML grid where we use arrow keys to navigate the cells (like a spreadsheet made of divs). Each cell has an INPUT textbox. We use javascript to catch keyboard arrow keys to move around the grid. This has worked fine in all browsers for over a year. Now, with Chrome 39, the grid will no longer scroll properly so that the input with focus is visible on screen.
Here is a fiddle to demonstrate the problem: scrolling list.
// This causes scrolling into view on focus to stop working
$('#grid').on('focus','input',function(e){
this.select();
});
Use the up and down arrows to scroll through cells in the list. When it hits top or bottom, it should scroll into view if the new cell is not already in view.
This fiddle example still works fine in IE10+ and Firefox, but in Chrome 39 (latest version), it will not scroll when you arrow into a new cell off the bottom or top. Also, it looks like the textboxes redraw off by a few pixels sometimes.
When a new cell (input) gets focus, we call this.select() to select any existing text. If we remove the call to select(), then Chrome 39 works fine again. But, users would like to see text selected.
The question is: Is there something I am doing that would cause this, or is it a bug in Chrome 39?
If it is a bug, does anyone know a workaround to select input text without breaking the native scrolling into view behavior? Any ideas would be appreciated.
Update:
It appears that even removing ALL JS code, leaving just a bunch of inputs in a scrolling div also fails (only on Chrome). You can only navigate with tab/shift-tab without JS, but scroll problem still occurs. Am I going crazy, or do other people see the same screwy scrolling when running this fiddle?
See Updated Fiddle for example.
The problem seems to occur, in my experience, from a parent container with position absolute/fixed with z-index value. This affects Chrome 39+
Try setting that parent container to have the following CSS declaration:
-webkit-backface-visibility: hidden;
Well, it looks like it is just a bug in Chrome 39. Hopefully, they will get it fixed before too long.
Luckily, Chrome is also one of the few browsers that supports the scrollIntoViewIfNeeded() method, so as a workaround I was able to do something like this in the focus event handler:
this.select();
if (typeof this.scrollIntoViewIfNeeded === "function")
this.scrollIntoViewIfNeeded(true);
So, that solves the immediate problem.

Opening mobile menu in Chrome for Android by setting width only works first time.

So I'm trying to have a mobile menu that slides out on the left when an icon is clicked, and disappears again after you click outside the menu. Like this:
http://codepen.io/anon/pen/LzJuq (old, see new codepen below)
And it works fine on desktop and in Android's default Browser.
On my phone, in Chrome, the menu will only open the first time. Each subsequent time it closes itself before it finishes opening.
I can see that it tries to open... so I assume, because the #menu-icon is actually within the #content, it tries to run them both... but I don't exactly know what to do.
Edit: So I've changed it to just manually set the width instead of adding/remove a class that specifies the width: http://codepen.io/anon/pen/Bmdny
The menu consistently opens now, however the links in the menu seem to be 'transparent' on subsequent opens. I.e, I see the blank background of the menu, but nothing in/on it, but I can still click the links. If I zoom in, even just a little bit, it seems to force the browser to repaint and the menu items appear.
Everything seems to work fine in Android's default browser, just not in Chrome for Android.
I've tried commenting out the css transitions, to no effect. I've tried giving the menu items a z-index higher than the menu itself (I'm desperate, lol), no change.
I just don't understand what's going on.
Thanks.
Info:
Chrome for Android v32
Android 4.3
Samsung Galaxy Nexus
What navigator are you testing it on? I can't reproduce the error on my phone nor my tablet.
However, it seems that as the button is over the #content div, when you click on it, you are clicking both elements.
Try to remove the class only when the menu has it:
$("#content").bind( "click", function() {
if ($('#mobile-menu').hasClass('open'))
$('#mobile-menu').removeClass('open');
});
EDIT
Let's try to put an intermediate layer between the menu and the content. Let's bind the menu-closing event to this layer.
Have a look at this: http://codepen.io/anon/pen/jiyHI
After much searching, tweaking, and hair pulling I began to narrow the problem down to having overflow:hidden; on my menu.
I came across a few random posts of various sources that described a problem similar to mine, and there were always suggestions that it had something to do with the overflow property, but at first I didn't understand.
I was 'hiding' the menu by setting width:0;, so in order to hide the content as well, I had to set overflow:hidden;. If I commented that line out, the menu opened fluidly and consistently, but of course: I could see the menu items all the time. Not what I wanted.
I tried transition the display property to learn that you can't do that. So I tried the visibility property, and at first that didn't work either. However, I came across this post from a guy trying to transition the display property, and this answer happened to work for me.
I still don't understand exactly why this works, I think it has something to do with delaying the second transition so it doesn't stop the first... Here's the article he linked in his answer.
So I guess the problem really had something to do with Webkit and fixed/absolute elements with ul's in them... not repainting after certain... anchor tag clicks? Or transitions? Yeah, I still don't really understand. But it works now!

jQuery UI Draggable div sticks to mouse

I am using a div as a popup which is draggable as follows
$("#popup").draggable();
The problem is if we mouseclick on this div and leave the click, then the div sticks to the mouse in some IE versions, especially on Windows 7. The div moves with the mouse even if its not click & drag action (its just a mouseover action). Please let me know if this is jQuery bug or some OS/browser bug with proper solution?
I am using jquery-ui-1.8.6 js with jquery-1.4.2 js.
i will recommend you to use the latest versions of both jquery-ui and jquery library file..
the code you provide has not much enough to be debate about but as you mentioned, it could be because of the older version of files.
i am using latest versions of both files (jquery-ui-1.8.21/jquery-1.7.1) and dragging is working fine in all ie versions.
but when you are using iframes, things went little different. because some browsers specially ie handles iframes differently, i might be guessing but it could be the case! :)

How can we scroll items inside a div with Touch events

I am designing a code snippet which will allow the user to scroll the items inside a div. Its more of a spinning wheel / slot machine. I know an existing solution for iPhone / iPod, but I wanted to have a simple stripped down code.
I have not used any images, and I believe this would involve CSS3 animations.
So far here is my code in jsbin. I have tried binding the touchmove event using jquery, but the alert is not popping up?
My main aim is to enable the user to scroll / swipe Up & down the items inside the div, without making the page scroll up and down. Any suggestion / edits to the code are appreciated.
My intended use for this is for mobile devices (iPhone / Android)
Thanks in advance.
you've almost been on the right side:
http://cubiq.org/iscroll-4
try iScroll.
only limitation that i encountered during my test was that you have to wrap your code in a list (ul) - though that could have been my bad
I think what you are looking for can be achieved by simply using the deafult behavior on IOS Safari (iPhone/iPad)
Just give some fixed height to the container div with overflow
e.g.
<div id="container" style="height:400px;overflow:auto">
Your content
</div>
It would scroll using 2-fingers on versions prior to IOS5 and with a single-finger move for IOS5 and later..

Smooth Page Resizing in Firefox with jQuery After Hiding Element

In my web application I frequently have sections that need to be collapsed/expanded. I do this with jQuery using the slideDown() and slideUp() methods. They work great. However, in Firefox, if I am scrolled all the way to the bottom of the screen and I collapse a div the screen stutters and flashes as the div disappears and the page is automatically resized by the loss of the element.
Has anyone run into this problem before? I've been working around it by setting a min-height with a generous amount of space for any section that will be collapsible but this seems like an unnecessary solution. Chrome doesn't have this problem and, amazingly, neither does Internet Explorer, both of which smoothly resize the page without any sort of stutter or flashing.
I'm using Firefox 3.6 on Ubuntu and I've experienced this problem on earlier versions as well. I have not tested on Firefox 4.
I have ran into this problem before and yes. I have worked around this by setting a mini-height or consider not using a slide effect.

Categories

Resources