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.
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.
On a desktop, if I make an image a link, I can make the mouse change to a pointer to indicate that the image is clickable. How do people normally indicate a clickable image on mobile since there is no mouse?
Check this page in Chrome (Mac).
http://lindesvard.se/varumarkesutveckling/
1) Page top has five icon buttons with CSS animated hover effect.
2) Page bottom has a contact form.
3) When NOT hovering icon buttons, contact form checkboxes render perfect.
4) But AFTER hovering any icon button, contact form checkboxes collapses.
When searching for Chrome CSS animation bugs, there is a lot of suggestions on using translateZ(0). So I wrote CSS
-webkit-transform: translateZ(0) scale(1.1)
but the bug is still there. All works fine in Safari. Does anyone have any clues on what happens here?
I'm implementing some drag/drop functionality from a button onto a canvas on my html5 site. When the drag operation is over the canvas, I start drawing custom shapes under the cursor. However, by default the button's image is included in the drag process thereby overlaying my canvas drawings. Is there any way to hide the default drag image? It seems that one can call setDragImage but that's not supported in IE9 and calling setDragImage(null, 0, 0) doesn't work in Chrome either. What are my options?
edit: to be clear, I'd like to hide the ghost image that is created with native drag/drop
Opera is the only browser I've tested that doesn't recognize the links on my home page. I can click on a few of the images and go to the linked page, but most don't do anything when I click. The cursor even remains an arrow. Works in every other browser.
http://test.davewhitley.com/not-wp/mobile_test/
They are images wrapped in anchor tags and the grid is created with css columns.
Any ideas?
Update:
The same links that are not clickable also aren't inspect-able in opera's web inspector.
Update:
Please note that some of the images are click-able on the left hand side. Which images are click-able varies with the browser width. If you view the website > 1300px browser width then most of the images are not click-able on the right side.
This seems to be a known bug in Opera 11.6x which is fixed in the most recent previews of Opera 12. I don't know of any workaround right now, but given that a fix is coming in the not too distant future I would simply wait for it.