Trying to move from developing on Chrome to Firefox Dev Edition, and when I am in the Firefox DevTools, I'm triggering the hover state on an element but the state disappears as soon as I click any other element.
This is not happening in the Chrome DevTools, for example. The element is hovered until I cancel the hover state or reload the page.
I'm not interested in using jQuery to trigger the state.
How do I make it permanent? Is this supposed to be like this, or is it just a bug?
The behavior you are seeing is indeed a bug in the Firefox DevTools, which is filed as bug 1185797.
Related
Here is an example page:
https://www.lazada.vn/products/dam-xoe-so-mi-vien-den-han-quoc-dx30-trang-i145861801-s151858737.html
When I right-click the main product image on this page and choose "Inspect Element from the context menu, the DevTools open, but select the <body> tag instead of the one I clicked.
Chrome's DevTools do select the <img> tag, as expected.
Is this a bug in the Firefox DevTools?
When you right-click the image, you actually inspect the overlaying semi-transparent blue <div>, not the <img> tag. This <div> is only temporarily added when hovering the image.
The reason why you don't land at that <div> in the Firefox DevTools is that it's removed again as soon as you hover the context menu, while in the Chrome DevTools it's still there when moving the cursor over the context menu.
This is because mouse events are obviously blocked in Chrome while the context menu is shown, in Firefox not.
So, I see two solutions for your problem:
Use the inspection tool from within the Firefox DevTools:
This shows a highlighter, which blocks mouse events, so that you can inspect the image.
Request to change this behavior so that mouse events are not triggered while the context menu is open.
I am try mozRequestFullScreen() to do screen in full size in Mozilla. It works perfectly but the element present on video(Text, Button, etc) gets hide behind iframe. In older version of firefox it works and element display properly. But after firefox updated to 44.0.2 iframe is placed on top of element. And element gets hide.
Is there is any change in mozRequestFullScreen() after new version release.
Thanks in Advance.
I'm using a specific template which seems to cause a deffect with scrolling.
Whenever I recieve data from ajax and insert enough HTML so that the page should get a vertical scrollbar, it doesn't.
When I open up chrome devtools, or when I hover an element that has a popover, the scrollbar suddenly appears.
It only seems to effect google chrome.
I can't seem to find the cause and I'm wondering if there is something I can do to trigger an update, just like the devtools do.
When using jQuery, you could try to do
$(window).trigger('resize');
To trigger a resize, like what happens when you open your devtools.
Adding a touchstart event listener on a document appears to create unexpected behaviour on child iframes. It appears that hover states are triggered on items in the child iframe content when you try to scroll. I have setup an example to demonstrate this here:
To see the "bug", test this url in mobile Safari (not sure if the same issue applies to other browsers)
http://fiddle.jshell.net/tChLS/2/show/light/
When you drag over the listview, hover states are sporadically triggered on the individual list items (changing the background color)
An alternative version here has exactly the same setup but without the touchstart event listener and behaves as expected
http://fiddle.jshell.net/tChLS/3/show/light/
I need multiple touchstart listeners on the parent document and I don't want to remove the hover states in the iframed document. Does anyone have a workaround for this issue?
I am running the latest version of Chrome on Mac Lion. I added a FB like button to my page which works fine on Firefox but does not work on Chrome for some reason. There seems to be a quick window pop-up which tries to load and then it disappears without the "Like" taking place.
Fiddle - http://jsfiddle.net/luisp128/X7SDR/3/
I thought it might be related to this prior question, but FB said this issue was already resolved: the the popup window ("flyout") of a like button doesn't show up in a chrome extension
One thing to note is that you must be logged into Facebook within each browser for the FB buttons to appear in that browser (otherwise the buttons have no context). If not, the buttons are not shown.
So, if you're seeing this problem, open a new tab, log into FB, and then refresh the original tab - the buttons will then appear (assuming there isn't a second problem)>