We Keep Coding

Multiple tinymce textareas on one page -- correct chrome menu not always appearing

I have a page with multiple tinymce textareas, using the browser's default context menu. The issue I'm having is that sometimes Chrome will show the correct textarea context menu (cut, copy, paste, etc.), but every second time I open the context menu (roughly), it shows the non-textarea content menu (back, forward, reload, etc.)
I've a sample Fiddle here demonstrating the issue: http://fiddle.tinymce.com/Bugaab
If you right click in either text area (in Chrome) a few times, in different locations, the different menus will appear.
I'm fairly sure I'm initializing the controls correctly. The problem doesn't occur with only a single textarea.
Any help appreciated.

Not quite. It's not a tinymce context menu at all. That's Chrome's context menu when it opens inside an input or textarea. It has different menu items depending on the context.
I said earlier that the issue didn't occur when only a single tinymce textarea was on page, but I see now this was incorrect. The issue happens for every tinymce textarea.
I think the problem is to do with the area of the textarea. Tinymce hides the actual native textarea control and draws its own, and it’s probably incorrectly mapping the dimensions somehow, confusing Chrome into thinking the mouse click is outside the control.
From what I’ve seen, the norm with this control is to use its own context menu rather than rely on the browsers, which is probably why I’ve had such difficulty finding mentions of the Chrome problem anywhere.

Website input type text focus only works when browser loses and gets focus

My website uses several input text elements and they are defined in HTML like:
<input type='text' style='width:200px;'/>
However if I open my webpage and I click on these inputs, they look like this:
So they display with no cursor and no blue border when they are selected.
But if I click outside the chrome browser, for example if I click on my desktop and then back to chrome, the inputs work and look like following:
So after this step, they look how they are supposed to.
This only happens in chrome and only on the server, all works fine on localhost.
I have no blur functions or anything else. What causes this issue?
Do anyone have any ideas about this?
Thank you very much!

Scroll to Focused Field Cordova

My Issue
I am currently in the process of writing an application for iOS using Cordova. I have a page with a form on it like so:
When the user taps on a field, the keyboard appears as expected on iOS. However, to prevent my app from moving off the screen, I have enabled the following setting:
// Prevent the keyboard from pushing up the webview
cordova.plugins.Keyboard.disableScroll(true);
Unfortunately, this prevents a few things that are causing me issues:
When a field is focused, the screen does not scroll to that field so sometimes, the field appears behind the keyboard.
Even if I did have a solution to the above, for the elements that are at the bottom of the screen, I will not be able to scroll down far enough to bring them into view above the keyboard.
My Question(s)
Solution 1
Is there any way, in Cordova, to auto scroll to the focused field without moving the whole app off the screen?
If it is possible, then how can I handle fields that are close to the bottom and cannot be scrolled up any further into view?
Obviously, the first point can be achieved using JavaScript/jQuery and some clever logic with the keyboard_height, position() and scrollTop(). But, this then creates the issue with the second point about the input fields behind the keyboard...
Solution 2
If I apply the following code, it will fix the issue highlighted above, but it will create another issue (explained below):
// Enable the auto scroll when the keyboard is shown
cordova.plugins.Keyboard.disableScroll(false);
Is there anyway to fix my header (the 'Edit Profile' bit), to the top of the screen to ensure that part is always visible?

Use https://www.npmjs.com/package/cordova-plugin-keyboard#keyboardshrinkview and its Keyboard.shrinkView method.

Screen reader is not interpreting tab navgation?

I have a pop-up window that I have enabled with tab stops via tabindex=0. When I interact with the page without a screen reader, I can use the tab key to move between the window and form elements that it contains.
When I use my screen reader client (Window Eyes 8.4) to view my website, I cannot consistently tab into the window.
Are there any special cases with code structure that I should be considering that would cause the window to either lose focus or prevent the screen reader from interpreting the markup of the pop-up?
For reference - I'm in a ASP .NET MVC4 web app (page is HTML/CSS/JS) that is generating the pop-up with a Kendo UI [Kendo] Window.

03/17 Update -
The pop-up is intermittently announced by the screen reader as a dialogue box but as soon as the pop-up loads, I can - occasionally - tab into the div and focus is not lost. I am not able to consistently reproduce this and only found this out after pressing the tab key rapidly after pressing the button to show the pop-up.
On the other hand (when not hitting the tab key rapidly), the focus consistently lands at the pop-up without focus outlines (screen reader announces "Foo dialogue box") but on first tab keypress, focus jumps back to the underlying page at the last actionable element before the footer. Pressing tab at this time will then move me into the footer UL element.

It is difficult to answer without a demo, but there are a couple of areas to investigate.
I did a page on the accessibility requirements for a content based pop-up, i.e. one that is not a form. That also includes code on how to manage the focus.
If the pop-up is essentially form based, you might want to try this one on dialogue boxes.
You'll see from those examples that adding tabindex to the container is only part of it, you should manage the focus as well, so that the focus is moved to the pop-up.
The sporadic nature of the issue might be because screen readers generally don't read things that are display:none, and tabbing to something that isn't there may not activate reliably.
If you can post an example I can update this answer.

jQuery animation and background images not showing in IE9

I'm having a strange issue with IE9 where if I have multiple <div> elements on the page, where only 1 is visible at a time and then others are shown as a result of JavaScript actions on the page.
The issue I am having is that if an element is hidden (seems to only happen after being hidden for a certain amount of time), when I go to show the elements w/ jQuery $('.className').fadeIn(500); for example, the background image properties of the elements inside that DIV that is being shown are lost.
They are still there when inspecting the HTML w/ IE Developer Tools, but the background image seems to not be recognized for whatever reason. In the developer tools, I can click to edit the background image path, and simply hitting enter (not actually changing the path) makes the background appear.
Is there something with IE that makes it ignore elements if not displayed on the page for a certain amount of time? Any help would be greatly appreciated. This is very strange as this was never an issue for me in any other browser or any other version of IE.