I'm using css/js to change the class of an element which the pointer is hoving over. The class determines the custom cursor image.
Unfortunately, it seems as if the cursor does not update in Chrome unless I physically move the mouse. Unfortunately the app is primarily used through the keyboard, however the cursor image is pretty important.
Any way around this?
Thanks.
This is actually a documented bug in Chrome and Safari. See this question on StackOverflow:
Getting the browser cursor from "wait" to "auto" without the user moving the mouse
I think you're out of luck for now, sorry
Related
So, there's an html page with an image map (img tag with usemap attribute) and clickable areas. Lately, I think after iOS 15 upgrade on iphone (XR, XS, 13), Safari stops firing onclick event on areas. Initially onclick works if you tap lightly, with quick finger presses, but as soon as you tap a little longer (just a bit stronger tap, or a long press) it starts behaving as if there's no map and areas associated with the image.
You can test here https://demo.rezmagic.com/maptest.html
If you see "area click" messages, it works correctly. When you start seeing "image click" messages, it means it's broken - it does not detect areas anymore. If you reload page, it starts to work correctly again.
Any ideas on what's going on here? Possible workaround? I submitted a Safari bug on Apple feedback but I am not sure it was the right place.
meeks seems to be correct about the OCR capability of newer Safari browsers breaking image maps.
The following is one workaround that you can use, but it will break the OCR capability:
Create a transparent gif of the same size as the imagemap. Let's call it placeholder.gif. Then add it in-front of the actual image and put an image map on that, like so:
<img src="placeholder.gif" style="position: absolute; z-index: 10;" usemap="#Map" />original image here
It works for me.
This is absolutely a Safari bug on mobile and desktop and it's been driving me nuts. Your image doesn't replicate the issue on desktop safari, but those with higher resolution and more obvious text do.
What's happening is that Safari now OCRs images to allow users to select and copy text from them. It does this by adding shadow DOM elements containing the text that float above the image, all contained within one DIV that entirely covers the image. This doesn't happen instantly, but seems to take a little time and perhaps depend on user interaction with the image.
You can watch this happen by opening the MDN web docs page for the map element here and looking at the Example (not the demo) with Inspect Element. The img tag with the map starts out simple, but once it shows that it has children you can expand it and see the shadow DOM elements. Once those are added the map no longer functions, presumably because the overlay elements pass through clicks to the image but not the map.
I had developed a workaround where you listen for click events on the image, get the click event's offsetX and offsetY coordinates, then iterate through the elements to compare the event's offsets with the coordinates, and then trigger a click on the that matches.
However, then I realized that iOS 15.4 came out today and so I upgraded my iPhone and it seems to be fixed now without any workarounds. So just upgrade and you should be fine.
I want to change the cursor speed inside some div tags, to give a better user experience in my web site. I have already changed the image of the cursor, I want to change slow down the cursor. Is there a way to do that?
I do not think this is possible to control the cursor with Javascript. But you could, however, hide the cursor using
cursor: none;
and then do some JavaScript to emulate a slower moving cursor made with HTML/CSS. But this would be much more work than it is worth, and probably wouldn't work out very well anyway.
Doing this using pure javascript might be a challenge but you can try incorporating this feature slowing down the cursor's speed while holding CTRL using the AutoHotKey script.
You need AutoHotKey installed to perform this but it's free and open-source.
You can't directly control the pointer speed via any DOM API, nor do I expect such an API will become available due to accessibility issues and probable click-jacking abuse.
That being said, in many modern browsers there is an API called Pointer Lock, where you can request control over pointer movements. Using this, you could emulate a slower cursor by taking over the cursor movements and positioning a fake cursor.
My users and I are running into a rendering glitch in Chrome only (on both Windows and Mac) where an overlaid div that I'm using for on-hover tooltip-style "popouts"(see first image below) does not get rendered properly in certain cases (see second image below). In all other browsers I've tested, it works as expected.
Here's how the hover popouts are supposed to look (and what happens in Firefox, Safari, IE):
Here's what happens in Chrome:
You can see it in action on this site if you look at May 24 using a browser window width of ~ 1200px (significnatly wider or narrower windows do not seem to work). The glitch only affects the popouts in the bottom right of the menu that are popping left, e.g. those on May 24. Hovers using the same exact mechanism higher up in the page work just fine. Glitched popouts are invisible (except for part of the carat), but if you click on the link to lock the popout in place and then hold left click while moving your mouse around as if to "select text" in the area where the popout should be, it will then render partially. Also if I open dev tools and try to select the popout, it will render just fine at that point.
I've been looking at this all day and trying different work arounds with opacity, z-index, etc. and getting nowhere. Does this glitch ring any bells for anyone? Is there a way to force Chrome to render the div, once its been positioned and unhidden? I'm fine with any work-around or hack.
I use a custom (and fairly complicated) jquery plugin for popouts. If it would be helpful to see the non-minified javascript for the plugin, I can post or provide a link to that, but general guidance that leads me to a work around will be sufficient to be accepted as an answer.
Edit: My Browser Build: 26.0.1410.65
(Per my comments)
This does indeed seem to be a bug in Chrome, though without a smaller test case to reproduce it, it could be very hard to track down. You may want to report it to the Chrome team with as much information as possible.
In support of my "it's a bug" assertion:
The hidden/clipped elements become visible when they are selected.
The elements underneath the hidden/clipped elements are not clickable.
This indicates that z-index and height is correct.
It only happens under very specific circumstances; the rest of the items with the same style work fine. The same item may work fine at a slightly bigger/smaller screen width.
Applying a 3D transform fixes it.
The problem goes away when I apply a CSS transform such as scale3d or translate3d. I imagine this is because certain CSS properties cause the browser to switch to GPU acceleration.
In this case, switching to the fast path for rendering seems to alter the drawing sequence enough to fix the problem.
Super hacky but this fixes it for me:
$('.drop-link.food').on('hover',function() {
$('.tool-tip').css('overflow', 'hidden').height();
$('.tool-tip').css('overflow', 'auto');
});
Obviously this isn't a "good" solution, and even remaining hacky you could probably optimize it to only force the redraw on the tooltip it needs to, but hopefully it helps...
Another clue:
$('.drop-link').on('hover',function() {
$(this).siblings('.tool-tip').css('display','block');
});
This won't fix it right away, but it seems like if this is there, once you've hovered on something, it will work the next time you hover on it.
Not sure if this helps with your situation, but over the last couple of days I've started to notice that certain site elements on Facebook and Weight Watchers no longer show up. Specifically it seems to be affecting items that (I believe) to be controlled by or dependent on Javascript. When I call up these sites in Firefox and Safari they work as expected.
I'm currently fighting a very frustrating bug on Safari, and I'm not sure where else to turn.
It seems most elements (but not all, and I can't discern the differentiating factor) that will trigger a focus event will cause all elements on the page that are transitioned or animated to jump ~2px to the top and left. And this only occurs on the first focus event after the page loads.
It's a little annoying to see the bug, as it's in the logged-in portion of droplr.com, and I have been completely unable to distill down a simpler case on JSFiddle.
If you have/create an account and log-in, click on this edit icon for a drop:
You'll see that on the first focus of the page, things jitter. Here's the timeline when there's a single drop on the page and I trigger focus on an offending element:
With more drops, it's just more of the same, but it seems to max out around 40 paints. And the profiler doesn't suggest anything nefarious. Just a trip through jQuery internals.
If instead of laying elements out via a translate3d or matix3d, I simply use top and left, this bug goes away. After hours and hours of debugging this, I'm at a complete loss.
Hoping someone has seen something similar, could take a look, or could give me advice on debugging next steps.
Thanks so much!
Update: Dave Desandro suggested it was the 3d acceleration kicking in, so I tried it out with a translate instead, and sure enough, that did not cause the jitter. I have no idea why the hardware acceleration would be firing up with a focus event though, and only once.
I've tried setting a transformZ of 0 on page load to go ahead and ramp-up the hardware, but no luck there, either. Any more ideas are welcomed.
I've had this issue a while back and honestly I don't remember what exactly was the cause but here are some of the steps I followed:
Check that you don't have hide() and show() for the same element in the next line or vice versa.
Example:
el.show()
el.hide()
Change Custom fonts to "Arial"
For the elements you don't want focus events add this code at the bottom of your scripts:
noFocusElem.off('focus');
This will make sure to remove any focus handlers you might have added by mistake
Finally place your css before any scripts. It's a know fact that adding css rules after an inline style has been applied may cause jitter especially if you're using line-hieght property
Hope this helps :)
I've had this happen when using custom font kits. Could this be the issue? Some events cause custom fonts to re-draw, which can cause a ever so slight "jitter" in page display.
Sometimes, manually setting heights and widths on all the parent HTML elements can reduce the flicker.
I know this question was posted a while ago and this is a bit of a long shot but here goes:
Maybe as a starting point go back to chrome and look at the composite layering:
Hit this into the address bar:
about:flags
You will be able to enable composite borders from within there. The red borders generally indicate a rendering issue:
http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
What I have found from time to time is that although there are rendering issues in Chrome the browser copes pretty well with hiding them from me. In other webkit based browsers however the result can be more noticable (i.e. android).
I've also seen flickering occur when z-indexes are being used in conjunction with content that is being transformed.
Either way it would be great to know how you resolved this issue (if you did). Post an answer to your own question perhaps?
A way to avoid spending time fixing load time twitches; you could set the page to hidden then make elements visible with the load. If your page is slow to load, you may want to have a spinner default to visible, then have load hide it. Then you could come back to the issue when you have nothing better to do.
Just my 2c worth.
The first thing I would try:
First in chrome, whack in 'about:flags' (yes I know you're not using Chrome). Find the 'Composited render layer borders' and turn it on. Once this feature is switched on you'll get a rough idea of what is being rendered/hardware accelerated.
See: http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
and look for any rendering problems. These are normally caused by z-indexes. Play around with any z-indexes and hide/show certain elements until the rendering issues are resolved. Then work from there. translate-z hacks and opacity can also cause problems.
From experience I've found rendering problems in other webkit browsers can be diagnosed using chrome. Flickering is a common occurrence on the stock android browser.
Secondly: take a look at the focus event itself and try things like preventing the default behaviour. Seems like a long shot to me but give it a go.
I haven't tested this, so I will be very surprised if it works... but here's an idea:
$(document).ready(function() {
$(document).focus(function(e) {
e.preventDefault();
});
$(document).click(function() {
$(document).unbind();
});
});
I've been running into the same issue recently and found something that fixed it in my case.
Check for anything that's hidden offscreen like:
text-indent: -9999px;
left: -9999px;
Removing any instance of these from the 3d accelerated elements (including children) stopped the content jump on focus for me.
I am trying in vain to get this Flash based navigational item working in FF and Chrome on PC. It's all good on Mac and it's just fine using IE 7 or 8 on PC.
The nav item consists of a ball that "follows" the cursor in relation to where it is on the page. JS is used to gather the X/Y info from off the Flash stage and create vars to be used by the Flash movie to move the "orb" in relation to the cursor position. For some reason, FF and Chrome on PC fall short here.
I've tried everything from setting the Flash movie to "opaque" and positioning a transparent DIV over it, all to no avail.
Any thoughts on this? Has anyone encountered something like this?
Example here:
http://anthrograph.com/yarbyarb/thang/
We were given the compiled SWF with the listeners setup, but as of now, I do not have access to the FLA to make changes.
Thank you!
i tried in chrome and firefox, when mouse is on html part, positioning is working, while mouse is on flash it is not working.
if i understand, easiest solution is for window mode, you should make a displayObject, a sprite and set it to belove everything else with alpha = 0, with this you can set window mode anything you like.
other then, you should add Listener to MouseLeave and MouseMove to detect when listen javascript or actionscript.
there is another error, you should mask your buttons that right side. they are under other graphic but mouse_over is working when it should not. For this use ROLL_OVER instead of MOUSE_OVER.