The goal is to have the cursor change, if the left mouse button is held down over an element, in this example a button (same behavior was observed for a canvas element as well).
Strangely, in Chrome 32.0.1700.76 the cursor does not change as expected, if the mouse button is held down in the upper area of the button, up to about 60 pixels from the top.
Note that the problem only occurs, if the button is located at the very top of the webpage.
That's why i can't show the effect on JSFiddle.
This code sample can be used to reproduce the supposed bug:
<html>
<head>
<style type="text/css">
#testButton {
cursor: pointer;
}
#testButton:active {
cursor: move;
}
</style>
</head>
<body>
<button id="testButton" style="width:200px;height:200px">click</button>
</body>
</html>
Firefox and IE switch the cursor as expected on holding the left mouse.
Can anyone confirm this misbehavior or propose a way to fix it for Chrome?
Are you emulating touch events in Chrome?
Open the settings for the inspector and in the "Overrides" section turn off "Emulate touch events".
Related
How can we disable "double tap to zoom" on Safari iOS 13+ mobile?
Sometimes it zooms, sometimes not. i feel it may only work on specific HTML-elements.
And i read that "double tap to zoom" should be disabled on iOS 13 by default and only pinch-zoom should work, but that's not the case.
You can add the below meta tag to stop zooming on ios devices.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
a css fix:
body{
touch-action: manipulation;
}
Hope is helps.
This works in Safari iOS 15
document.ondblclick = function(e) {
e.preventDefault();
}
When you want to disable "double tap to zoom" only on part of your screen (in my case, there was an image gallery that allows going to the next or previous image by tapping on the right or left side of the gallery and double tapping was interrupting the user experience), you can set pointer-events: none on the image elements or their parents, and attach event listeners to the root element of the image gallery.
So, given the following HTML:
<header>…</header>
<ul class="slideshow">
<li><img src="…" /></li>
…
</ul>
<footer></footer>
You’d do the following in CSS:
.slideshow > * {
pointer-events: none;
}
And attach event listener to .slideshow that doesn’t have its pointer events disabled:
document.querySelector('.slideshow').addEventListener('click', (event) {
// detect what part of the screen was clicked and go to the next
// or previous slide
})
I came across this page earlier while trying to stop any touchscreen browser from zooming on either double tap or two finger zoom. It's essential for my website which presents on a tablet allowing the public to click and register satisfaction of events they have attended, so I don't want anybody to fiddle with the layout.
I unsuccessfully tried Helmet, and finally the way I got it to disable all unwanted move/zoom events was to use CSS similar to above:
body {
touch-action: none;
}
Stating 'none' disabled double click zoom, whereas 'manipulation' still opened the door for double click zoom (although it did disable two finger zoom).
I am working on a form for a company that still uses tables and they want me to add CSS to their template without changing any HTML/JS. There is a nested input(CheckBox) that should be selected when a user clicks the image. This is working fine in Chrome, Firefox, and Edge but in IE when the image is clicked it will not check the box. Below is a screen cap of the DOM and an actual choice in the browser.
I changed the background color of the font tag to distinguish it from the image and added a border around the td. I noticed 2 strange things.
When the font tag is clicked it will check the box.
When the box is checked, I am able to click the image and have the checkbox
de-selected. Once it is, I can not re-select it by clicking the image.
Any idea of what is causing this and what can be done? I am using IE 11.
It appears that IE has a bug which causes this problem. I found some helpful information from this site:
https://snook.ca/archives/javascript/using_images_as
The CSS fix was:
label img{
pointer-events: none;
}
label{
display: inline-block;
}
I have added my own icons on my website. The first is for default icon that will be used on website, while the second is for links. However after clicking on a link, when a new page loads, or when I click on an image, the default arrow icon appears for a brief moment.
I am using Google Chrome v.56 and Mozilla Firefox 49. Is this a bug or am I doing something wrong?
CSS File:
body {
cursor: url(images/SnCPointer.png), auto;
}
a {
cursor: url(images/SnCLink.png), auto;
}
The website is: http://www.rglowimeeting.org/index.htm
The issue can be reproduced by holding down the 1st mouse button over the Website under Construction image
I have an asp.net, mvc 3 app which shows a page with the following in it:
<input type="file" id="binary" name="binary"/>
On IE the "Browse..." text is getting highlighted, making the button look like rubbish:
When you don't highlight it, it looks like this
This only happens after a load or refresh of the page, and only if the Browse button is the first button I move the mouse over. I expanded the size of the button, and you can see the white highlight of the button.
This is very odd and only happens on ie. Any ideas?
From the screen shots I found that there might be background:white css you have applied.
If it is please remove it by,
input[type="file"]{
background: none;
}
When double clicking a jqplot graph, it is blinking and not showing the data point. When I click outside the canvas again, it reappears. This is the example. Is there any property that I am missing?
Now, I got you. It's a webkit thing (the engine behind Safari and Chrome). The double-click is "selecting" the div.
Add this -khtml-user-select: none; to the chart div style. As in:
<div id="chart1" style="-khtml-user-select: none; height:300px; width:500px;"></div>
Does that make it behave?