Very strange behaviour in Google Chrome !
I've got a grid of div , and on each of then, I add an eventListenner for mouseenter event. In my demo code, when the event is triggered the div get opacity:0.2.
$(".target_div_class").on("mouseenter", [my action ...])
Well, it's work's on every browser except in Google Chrome.
To reproduce the strange behaviour in chrome, go to my codepen demo page place the mouse pointer in front of the grid and start to resize the main browser windows quickly, you will see that some of the divs get opacity changed even if there is not mouse roll-over !
what I'm doing wrong, is an special jquery event that Chrome doesn't like ?
thank's
larry
edit -1-
I think I understand why some div receive the event.
It seem's that, when I click on a border (left or right) of the browser, Chrome keep a trace of the mouse position X and Y.
Then when slowly expand the browser width, any div that under this "start mouse position" receive the event.
It is really simple to reproduce when first the browser width is thin, and then slowly expand it, if I take a pen and place it at the mouse start position before resize, It's clear. very very strange.
edit -2-
This behaviour is only on a OS windows 8, I've just test it on a Mac , and there is not problems !
Well, I've been testing this behaviour on a couple of sites, like this one :https://devart.withgoogle.com/
made by Google professional I suppose, and the strange behaviour occurs again, I'll try to find how to contact Google Chrome team ...
I do not believe that mouseenter/mouseleave is fully supported by chrome. Chrome only simulates those functions, unlike in IE.
But, the problem only occurs when someone tries to re-size the window faster than the browser's edge actually moves and the mouse goes into the page momentarily. So, its not that unreasonable a behavior. You could always try to fix it with a
$(window).resize(function() {
//some code to reset opacity
});
See if this helps
$(".target_div_class").on("mouseenter", function(){
event.stopPropagation();
//your code
});
Related
I'm at a loss as to what is going on here.
Please refer to the CodePen: https://codepen.io/ilmiont/pen/jJjgPw?editors=1111
Swiping with a touchscreen should smoothly transition the screens up and down, using the "smooth" scroll behaviour.
This does work exactly as intended with Chrome.
Firefox... just doesn't scroll. Yet the touch events are being fired, and "Next" / "Previous" is being logged to the console. But the scrollIntoView(...) call does nothing when invoked with {behavior: "smooth"}.
If you click the button, the scroll behaviour is changed to auto (no smooth scrolling)... and this works without any issues in Firefox.
What have I missed? Why is Firefox not scrolling at all when smooth scroll behaviour is used, even though it seems the swipes are being detected correctly?
A further oddity: the demo doesn't work in Chrome in CodePen either. Copy the HTML/CSS/JS into a new document (right-click CodePen viewer, "view frame source") and run directly in the browser, and it works exactly as intended, with smooth scrolling within the pages.
I think I must have missed something, and the CodePen issues in Chrome are interesting, but I just can't see what right now.
Chrome... just works... except in CodePen.
Firefox... everything looks like it should work, but the scrolling never occurs.
This has taken me far too long to figure out, but here's the solution which finally works:
Use passive event listeners!
In the original pen, I was doing {passive: false} and then calling preventDefault(...) on the touchstart and touchmove events.
It turns out, that this isn't necessary to achieve the desired effect.
Using the passive listeners results in everything working as intended in Firefox.
I still consider the original behaviour is odd; further investigation revealed there seems to be a timing issue in Firefox. In the swipe(...) method, adding a 250ms timeout to the dispatchEvent(...) call results in everything working as intended also – it seems as though the touch handlers can continue to block/throttle scroll events past when they should have been removed.
Will keep investigating but I have a solution for now.
(Edit – forgot to mention, when using passive listeners, also set touch-action: none on the target.)
I have an issue with drag and drop on Chrome (v69.0.3497.100). Specifically, some of the drag and drop events are getting fired when Windows scaling is other than 100% even though they shouldn't be firing.
Check out stackblitz example, and try to drag "blue" rectangle over itself (just drag, move a little bit downwards and drop). If Windows scaling is set to 100% (browser zoom is 100% as well) then one event is fired (dragEnter) as expected (check the console). But, if Windows scaling is set to 125% (but browser zoom is still 100%) then three events are fired (two dragEnter and one dragLeave), and I expected only one event to be fired since the element was dragged and dropped on itself (as it was the case with 100% scale level).
It could be that since this is Windows zoom (and not browser's zoom) the left ("lightred") rectangle is larger that it appears, and it goes below right rectangle, and events are propagated to it, although I couldn't prove that since all elements have correct size in the inspector.
This doesn't seem to be happening in latest Firefox, IE or Edge.
Does anyone know why is this happening and how to fix it?
The more I look at this problem, the more it seems the Chromium issue. Some days ago I posted a question, then I wanted to set up a bounty for it, and then I found your one, and I believe they are interrelated: Subpixel scroll issue, can't set scrollTop properly on Chrome 69.
There are some bug reports in Chromium issue tracker related to scale-rounding problem: link 1, link 2... I also created my own bug: link 3. There should be more information but it takes too much time to research. I think we may join efforts and draw more attention to the problem, and for example if it's Chromium responsibility, to help them with clarification and prioritisation.
I have the same problem with Version 76.0.3809.100 (64-Bit).
And I offset the image to compensate for the strange offset that I get in your stackbliz example too.
But with scaling 200% I need to multiply my calculated dragImage offset by 4 !!!
On 300% it's at 9
On 350% it's at 12.25
Do you see the pattern ???!
I'm afraid of my hack/fix for this problem. Not sure if it's just on windows, if it's just desktop. But for now I guess I will have to do window.devicePixelRatio^2 so I can continue my work.
There are instances where a website has drag-and-drop features that will not work inside the Google Chrome browser.
Fixing Drag-and-Drop
Enter the following into the Google Chrome Top search bar.
Chrome Flags: chrome://flags/
Type Touch into the search bar and set the following options to Enabled.
I am not sure if anyone else is having this problem or not with three.js. I have a simple demo of a cube that will spin with a varying rotational velocity (arrow keys, mouse, or touch input). Everything seems to work fantastic in the Chrome browser. At work I hopped on the iMac, the textures seem to be splicing and not mapped to my geometry correctly in Safari.
I moved over to the Firefox browser on the mac and everything works, and the frame rate is decent. It just seems that for some reason when the cube gets rotated at certain angles the renderer jumps and the onscreen hud moves up and you can't see the title at the top and the stats widget moves up from the bottom of the screen. It also seems that my cube's y position jumps up at the same time. I seem to have the same problem in android on some of the mobile browsers. I was wondering if anyone has had similar issues in Firefox (on Mac?) or in mobile browsers with the rendering suddenly jumping, moving the onscreen hud, etc
EDIT: I have figured out the problem. I still do not have an ideal solution. I created a copy of my demo and tried commenting out my keyboard handling code and to my surprise the issue still existed. Apparently firefox is scrolling the window slightly up and down and the keyboard handler included in the THREEx library does not disable the default behavior of the up and down arrow keys in Firefox. In chrome there is no room to scroll my window and I simply make my renderer the size of the window. I do not see why firefox is scrolling.
I experiment the same problems on Firefox in Mac on your example.
The jumps on the rendering are due the garbage collector (poorly implemented on Firefox). You are allocating memory on each "animate" function.
Instead of creating new Vector3/Matrix4 for your rotation, use global variables, so you just create those objects once.
Besides, instead of using KeyboardState, and executing those 'State' functions on each animate call, you should use a KeyboardListener, which will execute your code just when something changes (and not all the time).
You should take a look to this example: http://mrdoob.github.com/three.js/examples/canvas_geometry_cube.html
The problem was that for some reason in Firefox (not Chrome) there is room to scroll even though the renderer is set to the window size, so Firefox was scrolling when using the arrow keys. To fix this, I edited two functions in THREEx.KeyboardState.js adding a preventDefault() to prevent the arrow keys from scrolling.
Here are the needed edits:
this._onKeyDown = function(event){
event.preventDefault();
self._onKeyChange(event, true);
};
this._onKeyUp = function(event){
event.preventDefault();
self._onKeyChange(event, false);
};
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.
I've found some wierd behaviour related to scrolling and rendering and javascript.
How to make it happen:
On any webpage that is long enough to scroll on. Start to scroll pretty fast (fling the page). then release the touch.
Now while the page is still scrolling because of the momentum. Tap the screen to stop the scroll.
This make the browser enter a wierd mode.
On the nexus one it behaves like this:
The updating of what's shown on the screen stops, you can still click on links and the go to where they are supposed to but what's shown on the screen stays the same.
If you then scroll the screen a bit the update of the screen kicks in again and what you you where suppsed to see all the time is shown.
On all phones with HTC Sense I've tried (Hero, Desire, Legend) this happens:
The updating of the screen is stopped just like on the nexus one, but also the execution of any javascript is stopped.
If you click on a link that takes you to another page however things return to normal again.
The way I tested this was I created a page like this:
http://pastebin.ca/1881620
The changeColor function simply changed the background color of 'container' to a few different colors.
So before the error what happens is that when you click any link the color changes.
after the error this happens:
Nexus one:
when you click on the links nothing happens (except the "orange link selected rounded corner box thing" is shown as if the link is clicked). Then when you scroll abit.
You can see the color has changed (and equal amount of times to the number of times I clicked the link).
On Sense:
The links take me to google.com
Has anyone else noticed this problem? Is there anyway to work around it?
Thanks.
You could try using a plugin that manipulates the browser's scrolling process, such as iScroll4.
iScroll4 let us do some pretty cool stuff (like fixed headers/footers), but it did have some performance problems in some of the older/crappier Android phones...
I can't guarantee that it'd fix your problem, and it'd be kind of a last resort, but it might be worth trying if you're interested in iScroll's other features, or if you've hit a dead end with your bug, and it's a show-stopper for your app.