I am currently working on a contenteditable iframe, which so far works perfectly under all browsers except for mobile Safari. I am using iOS 5.1.1. The issue is reproducible in any version of iOS that supports contentEditable up to the latest.
The issue is the following:
The content gets focused correctly when you tap on it, you can move the cursor and everything, however once you apply an action to it the following happens:
The focus is still in the iframe and you can see the cursor, however it does not respond to keydown as it previously did. Nothing happens, even if I move the cursor and still try to type anything inside.
Here is an example of what happens:
http://www.quirksmode.org/dom/execCommand/
If you focus the iframe anywhere inside the content and say you apply text-align right. The content is correctly aligned to the right, but if you try typing any additional characters, you can see that the ui locks, but no new characters appear inside where the cursor is. If you try to apply a different command it would still work though.
Does anyone have an idea of how I can workaround this?
you can simply use Iframes design mode instead of contenteditable attribute to make any HTML elements editable .
the javascript code to make elements in iframe editable is :
var iframe = document.getElementById ('the iframe Id ') ;
var doc = iframe.contentDocument || iframe.contentWindow.document;
doc.designMode = "on";
As I read no cross browser problems found in this method
for complete reference see here
Is upgrading your version of iOS an option? I just tested all the conditions you described using iOS 6.1 without a problem.
Since iOS5 was the first version of iOS Safari to support content editable, it's likely that the implementation contained bugs. It appears to have matured.
iOS 5.1.1 supports very minimal features of HTML5. It will work perfectly fine after you've updated it to iOS 7.
Related
window.scroll and window.scrollTo (its alias) don't seem to work on an <iframe> embedded in the Android 4.0.4 internet browser. Nor do any of the other functions (it seems) like window.scrollBy, etc. How can I work around this limitation and force the <iframe> to scroll to a specific position on the page?
Some extra information:
Solution doesn't need to be elegant, it can be a hacky work around. This is test code anyway.
While the code doesn't need to be clean, it should be at least possible to make it cross-browser friendly
Device is a Samsung Galaxy Note running Android 4.0.4 native browser
Frame is in the same domain, so code can be run on it
Other than the scrolling, I want to leave the page as untouched as possible
The <iframe> has finished loading by the time my code runs
Use focus()?
function scrollY(i) {
var div = document.createElement("div");
div.innerHTML = "<a style='position:absolute;left:0;top:" + i + "px' href='#'></a>";
div = div.firstChild;
document.body.appendChild(div);
div.focus();
div.parentNode.removeChild(div);
}
It looks like a known bug discussed here and here .
The following did a trick for me:
Switch off overflow style by adding {overflow:hidden}
Call scrollTo
Switch on style by setting {overflow:scroll}
This question has me completely stumped. Since it's in a browser extension, I can't post my code.
The issue is apparently that mouse events inside the iframe (hovering over a link, over text, selecting...) are off by about 200px, this includes right clicks as shown in this screenshot:
The red dot is the actual mouseclick location. Again, since this is an extension (I'm actually doing the JS part in Tampermonkey, it's easier) I can't try it out in other browsers so it might just be chrome.
The iframe is to contain third-party dynamically loaded content so I can't use a div or other element. It's also reused and is dynamically inserted on load.
This also doesn't happen the first time content is inserted instead it takes a few "cycles" to appear.
Any ideas?
This was apparently a Chrome bug, albeit a strange one. I started having other issues so I reinstalled Chrome and upgraded to Windows 8 (I was planning to anyway), the bug seems to have gone away.
EDIT: It just came back, it turns out that the issue was that I was using -webkit-transform: scale() to show and hide the frame with a transition, removing this fixes the issue.
So, to all those with iframe mouse event issues in Chrome/WebKit: check all of your transforms and any CSS3 effects, try removing them one at a time.
I am trying to do a hover over effect on an image on a site that I am working on. I am having two problems with this. The first is browser specific and is my main worry.
Anchor tag problem:
When I view the site on Chrome, Safari and Firefox the tooltip (Jquery tools) works as expected. When viewed IE, the hover over is really strange. It seems as though the hover only is recognized when your mouse is over the outermost row of pixels (the border) on the anchor tag. The result is not being able to view the tool tip while in Internet Explorer. I have tried doing this in ways other than with Jquery tools, but even with the HTML event "onmouseover", the same effect happens.
I tried a few things while experimenting with this, and it seems that if I put something inside the anchor tag like some text, the text expands the hoverable area. This is interesting because this only happens in internet explorer.
For my environment, I am running on a 27" monitor with the latest Chrome, Firefox, Safari, and Internet Explorer 8 to test for compatibility.
Second z-index problem:
The second problem I am having is with the tooltip. It seems as though the tooltip, although styled with the highest z-index, goes behind an image of a school that I have infront of it. I figured that one of you might have a clue on what is going on with that, because I am stumped.
View the site
I put the site up and minimized it on jsfiddle.com. Here is the link to the project that I posted.
http://jsfiddle.net/keirp/B9Cgc/
Give your <a> some dimensions and/or display block or inline block. IE has trouble getting position for <a> when they are inline with nothing in them
I'm currently trying to put together a rich text editor that includes widgets from a different location then the site the rich text editor is on. I'm doing this by providing an Iframe in the content area that is placed at the cursor.
Now the idea behind this instead of providing some kind of placeholder until they finish editing is so they can see what they are talking about while they type.
Now the iframe works perfectly fine in Chrome loads the content as expected, but in Firefox it seems to have disabled javascript in this case (notice none of the script files being downloaded), which is an issue as the widgets are extremely javascript heavy and don't function without it.
I have provided below a JSFiddle showcasing this issue, the site im loading in the iframe is just a javascript game but you will see it doesn't work in firefox but its okay in chrome!
http://jsfiddle.net/reefbarman/2uYja/2/
Any help is appreciated
Scripts won't be executed when designMode is activated (source). Internet explorer was the first browser to add this feature, and Mozilla implemented a similar function, heavily inspired by Microsoft.
Your code functions in Chrome, because Chrome has implemented designMode in a different way.
Well after some research and experimentation I was dealing with two different issues that looked like one.
Firstly I made a change to the rich text editor I was using to use contentEditable only as this seems to be the standard going forward and its a heavily html5 app im working on. So with designMode = 'Off'; the iframe would load in normal situations. But I had a strange issue where adding the iframe to soon after adding another element to the editable area caused the iframe not to load, so just delaying the add of the iframe by some time allowed that dynamically added iframe to load!
Problem solved!
Greetings,
http://marijn.haverbeke.nl/codemirror/jstest.html works on Safari on PC, but not on an Ipad. Which is a shame, since I wanted to use it for an app. My question is not only why does it not work, but how should I go about analyzing things that break on Ipad Safari ?
T.
CodeMirror2 works mostly fine on an iPad;
You can add text, remove text and move the cursor around.
You can however not hilite words and cut / copy / paste (as of today 2012-06-27).
The editor in CodeMirror is actually an iframe, and not a native text input form element. The problem here I suspect is that the browser on the iPad does not know if the keyboard should be activated because some DOM element has key events bound to it.
To do that, Safari would have to analyze the source code to deduce key bindings and when should the keyboard be activated - which sound hugely problematic to me.
perhaps it used an iframe in the past, but I have codemirror on my website now and I see no iframes at all contained inside it.
this is almost one year later though, so perhaps now the situation has changed.