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.
Related
In a landing page for a chrome extension, after the user installs the extension I show a popup that has an explanation on how to proceed. The popup contains images (that are served from a different CDN), the popup uses css animations and transitions when it appears.
Sometimes (not sure exactly when), even though the images are loaded (and visible in the dev tools) they are not displayed in the popup. I have tried changing it from css background-images to elements, I've tried updating the images src after the extension is added, and also to remove some of the animations, but it doesn't seem to fix this issue.
http://live.rounds.com/x-factor/
has anyone encountered a similar issue and knows how to fix or bypass it?
I have deal with same issue and only that works for me was removing -webkit-backface-visibility:hidden; from animate.css body tag
I' ve got a wild Javascript conflict since my client has decided to put his videos on Youtube. It's clear the conflict occurs between the iframe's javascript and my code (only a randomized fadin on the background)... The whole page resizes weirdly as soon as the video plays. The elements in the page loose their position AND width !!! I've tried to stop my script and also to remove the iframe: The window resizes well in both cases. This is not happening with other browsers (Safari 5 neither):
Unfortunately the site's already online:
http://www.digitalvideo.fr
You can reach my script via the source code (right click).
Any help REALLY APPRICIATED !!!
Thank's
Solution found !!
For those who could be interested:
Safari 6 dosen't have any problem dealing with z-index but, for any reason a Javasctript DOM element z-index modification while using YouTube iframe causes real problems on the displayed page (even and especially on non-modified elements).
In my case i was modifying this property on 2 div blocks.
Solved.
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
For a site i made, http://crystalmurray.com, i have a simple little script to smooth scroll to local anchors and push the anchor to the history like it never happened. Recently my chrome updated to 12.0.742.100 and this stopped working, however, it worked fine in safari and firefox.
The obvious workaround for it is to add content to each empty anchor tag and hide it, whether manually or programmatically.
Heres an example and tester for it http://jsfiddle.net/arzynik/zfmgt/
Both empty a and empty span tags fail to position correctly.
Any other suggestions? Id rather keep editing to a minimum when updating other sites.
Your test seems to work in Chrome 14.0.794.0 (canary). The problem is probably already solved in a future version. You can wait Or file a bug report.
I encountered this same issue recently. My workaround for Chrome 12 was to set position: relative for any empty anchor tags I had. The following should fix you up:
a:empty {
position:relative;
}
I have a some trouble with iFrame.
Basically, I have drop down basic CSS menu and right underneath it I have iFrame with flash from external website.
Unfortunately whenever the menu drops down it goes underneath the iFrame.
Is there a way using jQuery , JavaScript or CSS to prevent the menu from disparaging behind the iframe?
Many Thank
Dom
You can try putting your Flash object into opaque window mode (wmode = 'opaque'), but because of the Iframe, I still expect some inconsistency.
http://www.communitymx.com/content/article.cfm?cid=e5141
You could also try coupling this with what's known as an "Iframe shim". It's definitely a hackish work-around, but one that Google themselves have used, sooo... take that as you will.
http://www.oratransplant.nl/2007/10/26/using-iframe-shim-to-partly-cover-a-java-applet/
iframe shimming or ie6 (and below) select z-index bug
http://www.google.com/search?q=iframe+shim
Good luck :) #Vili might still have the right idea with just hiding the Iframe when your menu opens. This is certainly the lowest level, and should probably happen for any browsers that don't support these other "fixes" (hacks).
(BTW, you can forget Z-Index helping on any platform or browser. Iframes and Flash both exist on macro-layers above the normal document flow. A DIV will never show in front of either without some finagling).
AFAICT it will always be broken on linux, since Flash doesn't play nicely with the z-index directive.
On other platforms you should be able to tweak z-index to your needs.
Maybe visibility: hidden; on the iframe, when the menu is opened?