for a webapp I'm working with jQueries draggable and droppable function. Everything works fine in Chrome and Safari, but in Firefox there is a something weird going on: After dragging an element it gets inline height and width attributes. I already searched my code but can't find the bug.
Is there any way (with devtools for example) to trace back where this particular attributes come from (scripts, browser, ...) and to determine what exactly triggers these mysterious attributes?
Thank you!
Related
Question
I have a situation where the Firefox page render does not match the inspector html- that is, if I copy the inspector's outerHTML into a new document, it renders correctly. How is this possible?
Is this definitely a Firefox bug, or is there some intermediate render state where the inspector output has been updated but the page view hasn't? (If so, how would I force the render to progress past this intermediate state?)
Extra Details
I can also "fix" the render by manually (in the inspector) editing the attributes that aren't displaying correctly.
Specifically, for example, I might have a case where the code is calling setAttribute('width',10), which causes the inspector to say width="10" but causes the page to display whatever the width was previously set to. If I manually replace the width="10" with width="10", nothing happens; however, if I change width="10" to width="11", the width displays as 11, after which I can set the width to 10 again to make it display correctly.
Unfortunately, I have not yet been able to devise a simple example demonstrating this. My specific case is entangled with a fair amount of rendering code and involves changing dimensions on svg foreignObjects, but I'm mainly interested in the answer to the general question of how the inspector and page render can ever be out of sync.
(I have not been able to reproduce the issue in any other browsers, because Firefox is currently the only one that actually handles foreignObject correctly.)
Firefox Version: 51.0.1 (64-bit) on Mac 10.10.5
Updates
The main question still stands, but I'm increasingly thinking that a subtle Firefox bug is at the root of this. Some reasons:
Refreshing the page sometimes changes the behavior and sometimes doesn't.
I have tried adding getBBox calls right after each setAttribute, to force the browser to recalculate layout. This seems to work for every foreignObject- except for the first on the page. (However, sometimes the first one shows up- seemingly without anything being changed.)
JQuery's .attr seems to produce different behavior than .setAttribute and .setAttributeNS
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 have a website that uses OpenTable's reservation widget. In every browser except IE9 (including older versions of IE) I can style and manipulate the widget elements, both through a stylesheet and by using jQuery. But in IE9, the widget shows up with strange styling, and I can't effect it in any way. Even trying a simple test like $('#OT_form').hide(); has no effect whatsoever.
Here's a temporary link to the site:
http://www.tcmulder.com/jing/reservations
Anyone know what the problem might be?
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
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.