If I create a link with the attribute "draggable" and then drag the link, Chrome displays an image of the link that follows the mouse cursor. In some cases, notably when there is distance between the link and the left boundary of its parent node, the dragged image ends up at a constant distance from the mouse cursor.
Why is it that the partially transparent image does not line up with the mouse cursor in Chrome? It seems to work fine in Firefox and Opera. Is this a bug, and is there a fix?
See a very simple example here: http://jsfiddle.net/mjbCN/1/
This was eventually fixed, apparently.
https://code.google.com/p/chromium/issues/detail?id=101204
Related
Mouseover an a tag with chrome, it displays a href text at the bottom left corner, but sometimes after mouseout, the text display doesn't disappear, and sometimes it changed to display another link.
What cause the problem? Is it chrome's bug or related to some tips that frond-end designer should follow?
I need to right click on an element and go to inspect element.
I have tried to right click but since its a touch device emulator that action doesn't make sense, the dropdown doesn't appear.
It works fine when i am not in the emulator mode checking for things, but when i am in the emulator for touch devices (ipad, iphone, galaxy), I lose the right click.
How do it make chrome open that html tag just like the inspect element, so i don't have to dig through the html trying to find the element i want?
thanks in advance! :)
Left click and hold on the element in the emulation window.
The context menu will then appear, and you'll need to move your mouse to Inspect Element before releasing the click to activate it.
You can use either the magnifying glass in the top left corner of the developer tools, or you could turn off the touch sensor emulation by going to Emulation|Sensors|Emulate touch screen and turn it back on after you find your element.
I'm not a web developer, but I was dabbling with 3D CSS transformations and animations and found that they didn't interact with :hover the way I hoped or expected. I wasn't able to readily find any disclaimer that this is a known problem, so I'm wondering if I'm just doing something wrong.
To reproduce the problem simply, start from this demo 3D cube animation here:
http://cssdeck.com/labs/simple-css3-3d-cube
Add this to the bottom of the style section:
#cube div:hover {
background-color: white;
}
I'm looking at that, using Chrome. I was hoping that, as both the cube rotated and the cursor moved (or didn't) the front-facing side containing the cursor would have a white background. But in practice that doesn't happen properly. If I scroll the cursor over the animation it picks out the correct panel to highlight but then it often fails to update when it should. Most noticeably, if I stop moving the mouse it doesn't seem to detect any change in what element the cursor might be hovering over.
Is this a known shortcoming? Does anyone have a solution?
It appears there's a difference in Chrome's Webkit engine vs Firefox's Gecko engine. Firefox continually runs to check a hover status, while Chrome does not.
I tested it in Chrome and Safari (both run Webkit) and they have similar results. They do not update the hover state if you keep the mouse still. Firefox, on the other hand, continually checks the hover area when the mouse remains in the same place.
I am having issues with overlaying divs with transparency and being able to click on both layers in Chrome (but not IE).
In my search for answers I found the following example to illustrate:
http://www.searchlawrence.com/click-through-a-div-to-underlying-elements.html
The source for that page is commented to explain about transparency.
If I view this page in IE I can highlight (ie interact) both the text in the box("Here is a div with...") AND the text at the top ("This DIV is overlayed on..."). However, when I open the same page in Chrome, I cannot select the text at the top.
This highlights the issue I am having in using iframes which contains links, but I also want the page containing the iframe to also allow links to be clicked. The transparanecy works in Chrome in as much as I can see both sets of links, but can only click those on the top layer (ie the iframe). The top iframe allows me to see what is behind but not interact with it.
I know about pointer-events:none however, that then stops the links on the iframe. I can basically get it working on the background html OR the overlying iframe but not both!
Hope this all makes sense and thanks in advance.
It seems that the solution specifically for chrome is using the css:
div#parent, div#parent div {pointer-events:none;}
meaning Div, and all children div as well should enable clicking through.
I found the solution here:
Click through transparency in Chrome
I'm trying to work out why the StreetView controls don't appear in Chrome browser when StreetView is opened programmatically but they do appear when StreetView is displayed by using the pegman...
Here's the map:
http://beta.findtoilet.dk/?term=2&lat=55.678937&lng=12.575738&zoom=15&maptype=roadmap
Drag pegman to show StreetView and it works perfectly.
You can see the top-right close button, the zoom and compass controls and the bottom left and right Google links.
Now open the infowindow by clicking a marker or a sidebar item.
The infowindow contains a link to open StreetView for that marker - give that link a click.
StreetView displays but none of the controls are visible, neither are the two bottom Google links.
Yet if you hover the mouse where the controls would be displayed the mouse click works just as if the controls were visible.
If you hover the mouse top right until it turns into apointing hand and click where the zoom control would be, the StreetView will zoom in or out and while zooming you can see all of the invisible controls.
Everything works fine with Firefox and IE9.
I'm using the latest versions of all browsers on a 64 bit Windows 7 pc, another person has reported the same problem on 32 bit Windows XP.
I've tried to use the Chrome developer tools but see nothing that would cause the controls to not be visible.
This usedto work fine in Chrome so i'm not sure if the problem is related to a Chrome update or a change in the Google Maps API - no changes have been made to the map javascript recently.
Can anyone suggest what might be wrong?
Thanks.
Martin.
The problem seems to be with -webkit-transform:scale(1) that you apply to the #toiletMap div[style].
Removing this, it fixes the problem..
alternatively, you can add translateZ(0) to fix the problem.
-webkit-transform:scale(1) translateZ(0);
Update
It must be related to
http://code.google.com/p/gmaps-api-issues/issues/detail?id=3928&q=webkit%20Transform&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Stars%20ApiType%20Internal
http://code.google.com/p/gmaps-api-issues/issues/detail?id=2835
webkit-transform overwrites z-index ordering in Chrome 13