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.
Related
I found a really strange behavior when using a Materialize CSS modal in Firefox (66.0.1). It works fine in Chrome (73.0.3683.86) and MS Edge (where do you find the version?). I'm using Windows 10. It does this with the modal demo in the official Materialize CSS website as well.
The problem seems to start if you display a modal with enough content so that it displays a vertical scrollbar. It needs to have links or buttons to see the problem I will describe. You can simulate this by resizing Firefox so that its vertical height is small enough to make the scrollbar appear. Now close the modal. Then resize the height of Firefox so that the modal will appear without scrollbars. Open the modal and hover over a link or button and any hover effect that should happen, does not. Click once on any link or button and nothing happens. Click a second time and it works properly.
And even odder, after opening the first modal with a scrollbar, you can open the second without a scrollbar and do nothing for about 15 seconds and then the links or buttons will work fine.
When this happened, I tried right-clicking on the button to "inspect the element" in the Firefox Inspector. Instead of getting the button, I got the modal overlay element behind it. Note that when this happens, the overlay is not above the button or any of the modal content. It's not a z-index problem. To see whether it was a problem with the overlay, I added an onOpenEnd() function to the modal options that would remove the overlay as soon as the modal opened. I had the same problem. When I tried again to open it in the inspector, I got whatever was behind the button. So it's almost like the modal isn't even there until I click on the modal first or wait for 15 seconds.
I then tried to add some code to the onOpenEnd() function that would give focus to the button, but no effect with that. I tried tabbing to the button, but that didn't work either.
Just before submitting this I found another piece of the puzzle. As I said, hovering over the buttons when this is happening will not show the usual hover pointer. But if I hover above and a bit to the left of the buttons, the cursor does change. When I click there, the color of the buttons does change like it's been clicked, but the action (closing the modal) does not happen. Hmmmmm....
If you want to test this out, go to the Materialize CSS webisite and open the page for modals. (https://materializecss.com/modals.html) Reduce the vertical size of Firefox so that when you open the demo modal it has a vertical scrollbar. Now close the modal. Resize Firefox back to normal vertical height and open the modal again. Hover over the Agree or Disagree buttons and you won't get the pointer cursor. Try click once and nothing happens. Click again and the modal will close. Or wait the 15 seconds and then the buttons work.
Most of my users will have the modal open for more than 15 seconds so it's not a big problem. But sometimes they will open it just to check something and then want to close it. Sure they can click twice, but I'd rather it work properly. Chrome and Edge work fine. Firefox doesn't. Can anyone think of what is causing this and whether there is anything I can do in my code to make it work properly? Thanks.
This is the Firefox error page when you're offline. If you look at the red marked area, you see the svg background and some scripts are loaded from chrome://browser/content/.... What does chrome do there?
Firefox uses the chrome:// protocol to access Mozilla's chrome system - user interface elements and other resources (chrome is not referring to Google Chrome here).
From developer.mozilla.org:
What is chrome
Chrome is the set of user interface elements of the application window that are outside the window's content area. Toolbars, menu bars, progress bars, and window title bars are all examples of elements that are typically part of the chrome.
Using a Chrome URL we can access those elements with a browser.
For example, we can access the library menu with:
chrome://browser/content/places/places.xul
and the extensions menu with:
chrome://mozapps/content/extensions/extensions.xul
(URLs taken from http://kb.mozillazine.org/Chrome_URLs)
So, it seems that the chrome://browser/content/.. links are fetching Firefox resources needed to display the error page.
I have problem with animated SVG on my page (only on Firefox). The box shadow on each element of svg appears only after I double click somewhere on it. Please check this out on this page.
The shadow is visible right away on any other browser including mobile browsers, only on desktop Firefox the problem exist. I have no idea what double click changes in svg appearance.
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.
SETUP:
Using Google Apps Script's UI (doGet) with tabPanel option. At the bottom of each panel is a "previous" and "next" button to navigate through the tabs.
ISSUE:
When activating a navigation button the viewing area remains at the bottom of the screen.
QUESTION:
What code can be used to jump to the top of the screen? (i.e. window.scrollTo(0,0)
Unfortunately, there's no way to interact with the browser like this. But you can control the window scrolling if you wrap up all your GUI inside your own scroll panel, instead of using the browser's one.
Then, you can use the myScroll.setScrollPosition(y).setHorizontalScrollPosition(x).
using HtmlService with IFRAME mode...
$("html, body").animate({ scrollTop: 0 }, "slow");