I have recently started using Firefox developer edition and i have found a strange behavior on animations with a delay.
http://plnkr.co/edit/Tr1nd5r0gAyy3eH3Z7Zh?p=preview
.selection-buttons.ng-animate.ng-hide-add {
animation: 30s linear 1s fadeOutDown;
opacity: 1;
}
.selection-buttons.ng-animate.ng-hide-remove {
animation: 30s linear 1s fadeInUp;
opacity: 0;
}
If you open this Plunker with Firefox Developer the animation will play correctly but then the text will hide again for a couple seconds and then come back (or will be shown again for a couple seconds and then disappear when you click the 2nd time).
I have tested this in other browsers (Chrome, Firefox standard, Safari and Pale Moon) and the animation works fine.
The animations are realized using animate.css which i used the animation names in the CSS in order to use them together with ng-animate from angular, but I haven't tested normal animations without ng-animate
I have noticed that ng-animate removes its classes way after the animation ended. I have timed it and the class removal is delayed exactly by half of the animation duration (if you increase the animation duration, the delay will increase accordingly) so the animation ends but the other properties added by the class (such as opacity) are left until the classes are removed. This happens for any delay value, regardless of the value set, as long as there is a delay on the animation it will do this.
Surprisingly it will happen even if there's a delay on transitions (but still using an animation) either from the transition property or from the transition-delay property
If i remove the delay from the CSS attribute the animation works fine.
I have also tested using animation-name, animation-duration and animation-delay instead of the animation property
I have opened a ticket on bugzilla and it has been confirmed to be a bug introduced by a new feature (hiRes dom timestamps) replacing the current timestamps on Firefox versions starting from 44 and Chrome versions starting from 49.
Firefox Developer edition uses experimental builds, while Firefox standard only stable builds (latest stable is currently 42, which is unaffected, and so is version 43).
https://bugzilla.mozilla.org/show_bug.cgi?id=1231619
The Angular team has been notified of this bug
Related
I've read through dozens of SO threads on how to get orientation on Safari browsers. Almost every single answer recommends using window.orientation. This is documented as the recommended method here, since screen.orientation is not available on Safari, which is indicated on the MDN docs (even though it's marked as deprecated).
Great, so it just seems I have to check window.orientation if Safari is the detected browser. But that always returns undefined. I've tried checking all available functions when I inspect window inside a Safari browser, but there's no mention of any function that contains the word "orientation" in it.
I've inspected the attributes available within window.screen, but there is no mention of anything related to orientation or even the angle of the screen.
Cool. So how does one go about determining the orientation on this amazingly developer-friendly browser? I'm open to super obscure hacks, as that's been my go-to for most Safari functionality in the past.
I am using Selenium C# to drive a Headless instance of Chrome
((ChromeOptions)_Options).AddArgument("--headless");
((ChromeOptions)_Options).AddArgument("window-size=1920,1080");
I have run into the problem that my javascript is always detecting both
$(document).height()
and
$(window).height()
as being 1080 in height, which is not accurate. The document height should be much taller in some cases. Is there a reason this is not working correctly and/or a work around to solve the issue?
In my troubleshooting, I grabbed the value for this javascript, and discovered that it was also 1080.
Math.max(document.body.scrollHeight, document.body.offsetHeight,
document.documentElement.clientHeight,
document.documentElement.scrollHeight,
document.documentElement.offsetHeight)
This particular page is definitely taller than the screen, and I used the Selenium GetScreenshot() method to take a picture and verify the scrollbar exists and content exists below the visible area.
For clarification, this does work correctly when running the headed version of Chrome. And the javascript in question is being run from JQuery's method:
$(document).ready(function () {
We have an API which randomly takes high content download time in chrome, It works fine always in firefox and takes an only few ms. The response size is 20kb uncompressed and 4kb compressed. The same request also works fine using curl.
Things that we have tried:
Disabling If-None-Match header to disable cache response from the browser.
Trying various compressions (gzip, deflate, br).
Disabling compression.
Disabling all chrome extensions.
The same request works fine sometimes on chrome but randomly returns very high content download time.
We are unable to understand the root cause of this issue. What are the other things we can try to minimize this time?
I made three requests here and the 3rd one took the most time (before the last spike). CPU does not seem to be maxing out for a longer period of time. Most of the time is idle time.
Also, When replaying the call using Replay XHR menu, the Content download period drops from 2s to 200 ms.
Are you by chance trying to implement infinite scrolling? If you are, try dragging the scroll bar instead of using the mouse wheel. For some reason, Chrome seems to struggle with mouse scroll events. If the scroll bar worked just fine, keep reading.
This post provides a detailed walkthrough of someone experiencing something similar - https://github.com/TryGhost/Ghost/issues/7934
I had attached a watcher on the scroll event which would trigger an AJAX request. I had throttled the request and could see that only 1 was being sent. I watched my dev server return the response within a few ms but there would be a 2 second delay in chrome. No render, no api calls, no and scripts executing. But the "Content Download" would take 3 seconds for 14kb. No other browser had this issue.
I stumbled upon suggestions that using requestAnimationFrame instead of setTimeout would solve the problem. That approach seems that approach works when the "Waiting" or green is significant, not so much for the "Content Download" or blue.
After hours of digging, I tried conditionally calling e.preventDefault() on the mousewheel event and to my amazement, it worked.
A few things to note:
1) I did not use the mousewheel event to make the api call. I used the scroll event along with throttling.
2) The mousewheel event is non-standard and should not be used. See https://developer.mozilla.org/en-US/docs/Web/Events/mousewheel
3) BUT in this case, you have to watch and handle the mousewheel event because of chrome. Other browsers ignore the event if they don't support it and I have yet to see it cause an issue in another browser.
4) You don't want to call preventDefault() every time because that disables scrolling with a mouse :) You only want to call it when deltaY is 1 if you are using vertical scroll. You can see from the attached image that deltaY is 1 when you basically can't scroll anymore. the mousewheel event is fired even though the page cannot scroll. As a side note, deltaX is -0 when you are scrolling vertically and deltaY is -0 when scrolling horizontally.
My solution:
window.addEventListener("mousewheel", (e) => {
if (e.deltaY === 1) {
e.preventDefault();
}
})
That has been the only solution that I've seen work and I haven't seen it mentioned or discussed elsewhere. I hope that helps.
console log of mousewheel event
I think you may be doing it wrong.™
Fundamentally, if this really only happens with Chrome, then perhaps the client-side code is to blame, of which you don't reveal any details.
Otherwise, you are trying to debug what you present as a backend condition (based on the choice on the nginx tag) with front-end tools:
Have you tried using tcpdump(8) to troubleshoot the issue? What packets gets exchanged and at what times?
Have you tried logging the times of the request being received and processed by nginx? E.g., $request_time?
Where is the server located? Perhaps you're experiencing packet loss, which may require timeouts and retransmission of some TCP packets, which invariably will introduce a random delay?
Finally, the last possibility is that the field doesn't mean what you think it does -- it sounds like it may take a hit from CPU load, as this is the result of the XMLHTTPRequest (XHR) processing -- perhaps you run some advertising with user tracking that randomly consumes a significant amount of CPU, slowing down your metrics?
The pointerup event is not working correctly with Win Windows Phone 8.1 and Internet Explorer 11. I mean, it is triggered automatically (just after pointerdown), and not when your finger goes out.
I've done an example here.
If you test it with desktop browsers or Android-Chrome or iOS-Chrome/Safai works correctly
Has anyone any workaround about it?
Are you getting a pointercancel event?
If you don't set the touch-action correctly, then pointercancel gets sent through immediately after pointerdown. I think this is because the browser thinks a manipulation such as scrolling has been initiated.
To avoid this we use:
html.is-pointer-events .touch-grip {
-ms-touch-action: none;
touch-action: none;
}
Note that we activate this rule only if we are using Microsoft pointer events, because otherwise the touch-action property interferes with other browsers (e.g. Chrome).
We add is-pointer-events to document.documentElement.className if navigator.msPointerEnabled is true (i.e. we add the class when we are using onpointerdown instead of ontouchstart). If you are using modernizr.js then it looks like it provides a pointerevents class you can use.
Unless you have a compelling need for them and you can afford to invest a lot into it, I would strongly recommend against supporting Microsoft pointer events. For us they have been an expensive headache for us to support, and the value returned has been minimal for us.
I am using Selenium grid 40 with Firefox remote driver that runs in windows 7. I also use C# API. I was wondering how to Set Device width on headless Firefox browser. The device width is less than ipads max width and this causes it to pick up ipad specific css that is defined like below:
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
/* For portrait layouts only */
}
#media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
/* For landscape layouts only */
}
I have already changed window size using:
driver.Manage().Window.Size = new System.Drawing.Size(1290,900)
But it still picks up those css directives.
Other information: My grid node is virtual machine that nobody actually logs into. I remotely run the selenium grid, and that might be the reason why device width is small. it might default to smallest resolution for windows. If there is way to change that it might help me, but I am not aware of it.
Update: I tried to set all instances of DefaultSettings.XResolution, DefaultSettings.YResolution and DefaultSettings.BitsPerPel in registry to 1290, 900 and 16 through a powershell script and restart the computer but it didn't work.
I don't know how to set the device width using selenium, but I figured out how to set it using the remote frame buffer. For me this was Xvbf. I pass in the screen resolution when I start the service.
Below is an example of an Xvfb service with a resolution of 1024x768 with a depth of 24.
https://gist.github.com/dloman/931d65cbb79b00593ac3dd5d0cdf37d9
My experience is limited to using the Python implementation of Selenium so this may not work for you, but there you can use driver.set_window_size(width, height) before performing the driver.get() action that will load the desired page.
The key is the order in which you perform these actions: you want to tell selenium to change the dimensions of the browser before you load the page, because otherwise you are simulating the same behaviour as resizing a browser window after the initial page load. As you may know, when resizing a browser window, a page reload is needed for some 'responsive' features to be activated.