our app has an angular overlay that is always in the dom (although not always visible).. and sometimes when I attempt to click on elements on the page, Selenium throws an error...
Element is not clickable at point (544, 297). Other element would
receive the click: div class="overlay" style="transition-property:
opacity; -webkit-transition-property: opacity; transition-duration:
300ms; -webkit-transition-duration: 300ms; transition-timing-function:
ease-in-out; -webkit-transition-timing-function: ease-in-out; display:
block; opacity: 0;">
Does anyone else experience this? webdriver .isDisplayed always reports that it is false, even when it is still inhibiting clicks.
I have written some code that attaches to protractor's waitForAngular function that checks for various states of the overlay's dom element (to wait until it has a display: attribute with value "none"). This helps a lot and I no longer experience this issue unless the browser is executing in the background. If the browser is not in foreground, then I hit the overlay issue very frequently. While protractor is waiting (based on my wait for angular override), if I bring the browser to foreground, then the test immediately begins continuing to execute and the dom state changes for the overlay.
Would love any thoughts from people with insight.
I assume the .isDisplayed not working properly seems to be a webdriver issue. And I also assume that the overlay being stuck in a specific dom state in the background to be an angular issue.
By what is in your css properties, your element has opacity: 0;
accordantly to this answer here, elements with opacity: 0 still receive events, so your overlay is not completely hidden.
I'd suggest you to use other css properties to hide your overlay such as visibility: hidden or display:none; instead.
Related
Trying to get a dropdown menu going for my 6th project using Ruby on Rails. Kinda lost here, I've tried some codes from different sources scattered online, but I've had no success (not even close via copy/paste).
My current code:
.dropdown {
visibility: none;
}
.dropdown:hover {
transition-timing-function: ease-out 0.25s;
}
Can't seem to get the hover function working on top of the dropdown one for the life of me.
How would you recommend I get these ease-out/fade-in animations going?
Your visibility is set to none. And in your hover state you are just telling how you want the transition to unfold, but not what you want it to transition to... for eks. tell it to go from visibility: hidden to visibility: visible
I'm working on an angular app and I'm having an issue when adding a '.active' class to a nav item.
Here is a stackblitz link that demonstrates the issue:
https://stackblitz.com/edit/angular-jjqyft?file=app%2Fapp.component.css
Basically, when I click a box, it scales but part of the next box is showing, almost like the active box is transparent. My active class has a z-index of 1 and an opacity of 1.
On Firefox, this doesn't seem to be an issue. Also, I've done something similar using the same technique before (but without any frameworks). This link will show you an example from that project.
I'm not sure if I'm doing something wrong or if it's a Chrome issue. I appreciate any feedback.
EDIT: Just checked on Edge and the same issue is there. So far it seems like Firefox is the only browser where this issue doesn't exist.
Just add position:relative to either the .section a or .active
Such as:
.section a {
display: block;
width: 120px;
height: 80px;
opacity: .5;
transition: all .5s;
position:relative;
}
The reason the clicked element seems as if it has opacity <1 is that the next element is actually "above" it, while having opacity: 0.5;. By "above it" I mean that the next element is further down the DOM tree, hence having a higher stacking order than the previous (currently the clicked one).
I have tried a bunch of different solutions to similar problems on here but none of them seem to be doing anything for me. See my jsFiddle to see an example of what I would like to happen: http://jsfiddle.net/Amp3rsand/HSNY5/6/
It animates how I would like but it relies on .delay when I would prefer it to fire as soon as the image is finished loading. The commented out sections in the js are the things that I have tried.
Could the problem be that the image is actually the background of a div rather than its own element? I tested making it its own <img> tag as well but it didn't seem to make a difference. I have the image as the background so that when I use media queries it is easy to swap in a different, smaller image for mobile users or small screens.
HTML:
<header></header>
<div id="image">
<div id="blah"></div>
</div>
The image I would like to fire after it finishes loading is the background of '#image'. Then I would like for it to animate to 'opacity:1;' while '#blah' and 'header' are animated into place.
Here is the jQuery I'm using right now but it is not correct:
$('#image').hide().delay(800).fadeTo(600, 1);
$('#blah').css("left", "-650px").delay(1400).animate({left:'30px'},400);
$('header').css("top", "-150px").delay(2000).animate({top:'-5px'},400);
On my website it is quite a large image so it takes about half a second to load but this code doesn't take into account caching or different network speeds.
What am I doing wrong or what should I do differently?
Thanks everyone
EDIT:
I gave the imagesLoaded plugin a go earlier and it seems to work on my website but I can't tell if it is actually doing what I want or just emulating my code from above.
$(document).ready(function() {
$('body').hide().fadeTo(500, 1)
});
imagesLoaded( document.querySelector('#homeimg'), function( instance ) {
$('article').hide().fadeTo(600, 1);
$('#caption').css("left", "-650px").delay(800).animate({left:'30px'},400);
$('header').css("top", "-150px").delay(1400).animate({top:'-5px'},400);
});
'#homeimg' being the div with the image as the background and 'article' being the container for '#homeimg' and '#caption'
I can only test with the website loaded locally at the moment so I can't simulate a slow connection. Does the code above do what I am looking for? Sorry if it should be obvious
Your image is loaded via a CSS background property, you will not be able to detect the loading of that. Why not use <img> tag for images?
If you use <img> you can read this question: Browser-independent way to detect when image has been loaded for a bullet-proof solution.
If you insist on using a background CSS property you will need to implement a way of sending your image as a data url encoded as base64 as described in this answer: https://stackoverflow.com/a/13989806/2788
Try animate
$('#image').animate({ opacity: '1'}, 600);
You can set the initial opacity to 0, and when the image onloaded, set the opacity to 1. With CSS you can make a transition between the two states:
<style>
.easeload{
opacity: 0;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
}
</style>
<img class="easeload" onload="this.style.opacity=1" src="https://dummyimage.com/320x240">
In Chrome 27 (Windows) when I update the text of a specific element, the text disappears completely until I make it "refresh" but changing the CSS of any element or window size or whatever.
Firefox is fine, haven't tried any other browser or OS (yet). I suspect its a Chrome-specific bug. I just want to make sure I'm not going insane.
I am using: CSS3 transforms in some places; web fonts (tested without them and it still happens); nested position: fixed and z-index
It's similar to this SO question however when I disable web fonts (and falled back to Arial then sans-serif) it still occurs. I suspect it has something to do with the layering I'm doing and CSS3 transforms.
The element updating is a DIV within this container:
NAV {width:100%;height:50px;position:fixed;top:0;left:0;z-index:110;padding:15px 0;text-shadow:1px 1px 2px #FFF;font-size:110%;font-weight:500;color:#565656}
Which is wrapped in a parent page:
#pages {width:100%;position:relative;overflow-x:hidden}
#pages .page {width:100%;height:100%;position:absolute;top:0;left:0;padding-top:50px;-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out}
I apply CSS3 transforms only when animating pages in/out, however the bug occurs after the transform is complete:
#pages .page.left {-ms-transform:translateX(-100%);-o-transform:translateX(-100%);-moz-transform:translateX(-100%);-webkit-transform:translateX(-100%);transform:translateX(-100%)}
#pages .page.right {-ms-transform:translateX(100%);-o-transform:translateX(100%);-moz-transform:translateX(100%);-webkit-transform:translateX(100%);transform:translateX(100%)}
The code that updates the text (trimmed down):
$('.page[data-page="Game"]').find('NAV .title').text('My text');
I don't have a demo to show you yet, sorry. If you need more code, please let me know in the comments (as I'm sure you would do anyway). I've left out the HTML because I believe it's irrelevant unless you really want to see it.
if i apply a style to an element and immdiatily afterwards add css transition styles, the transition is applied to the style preceeding. this might not always be the intention.
i found a solution by using settimeout (0), is there any cleaner/more correct approach known ?
http://jsfiddle.net/nicib83/XP9E7/
$("div").css("opacity", 1);
$("div").css("-webkit-transition", "all 0.35s");
/* Works
window.setTimeout(function () {
$("div").css("-webkit-transition", "all 0.35s");
}, 0);
*/
best regards
Edit:
i didn't mean how best to set css styling but how to sequentially set styles when the first style should be applied without the second being active at that time but only afterwards, i wan to add transition afterwards. settimeout fixes it, best solution ?
It's much better to pre-define a class that contains both of the properties you want to apply, and add that class programmatically to the element. Both of the properties will be applied together.
.myClass {
opacity: 1;
-webkit-transition: all 0.35s;
}
$("div").addClass("myClass");
You could take a page from the book of Twitter Bootstrap:
fade {
opacity: 0;
-webkit-transition: opacity 0.15s linear;
-moz-transition:opacity 0.15s linear;
-o-transition:opacity 0.15s linear;
transition:opacity 0.15s linear;
}
.fade.in{
opacity:1;
}
then programatically add the .in class when you want it to fade in:
$("div").addClass("in");
with your original div looking something like:
<div class="fade">Box</div>
I've been running up against this myself and also found the setTimeout solution. After some research the issue is how the browser handles scheduling. The JavaScript runs in its own thread separate from the threads dealing with the UI and the DOM (which is why issues like UI blocking happen).
In cases like this both JavaScript statements run before the document registers the first change and it ends up applying both classes at the same time. setTimeout(fn,0) effectively makes the function asynchronous and shunts the functions to run at the next available opportunity. This allows the UI thread to catch up before the next class is added.