Develop Reference

Chrome opacity transition z-index issue

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).

CSS: Adding a Delay to Submenu Dropdown on Hover (Bootstrap 3 / MegaNavbar 2.2)

Now i am officially desperated. I bought a Script to use a MegaMenu on my Site.
The Script is MegaNavBar 2.2
http://preview.codecanyon.net/item/meganavbar-v-220-advanced-mega-menu-for-bootstrap-30/full_screen_preview/8516895?_ga=2.119686542.744579007.1495443523-2131821405.1495443282
I wanted the script to open the submenus on hover, so i configured it as described on the Demo-Page (see above).
This worked fine. But i wanted to add a delay, because its irritating users, if they move the mouse pointer from top to bottom, and everytime the menu is open immediately while hovering.
What i tried:
Asking the support - No Answer
Trying to add an animation and animation-delay
The Animation is working, but the delay is not working, i assume because of the "display:block"
Trying to add an transition
The Transition is not working, because Transition is not working with "display:block".
Is there anybody out there, who can help me with this stuff?
Here is my Bootply:
https://www.bootply.com/A50M0Wk9NK
(The assumed css rule is in line 29 of pasted css-code)
Best Regards,
Michael

You can try to use Visibility instead of Display, and thus use transitions.
e.g.:
div > ul {
visibility: hidden;
opacity: 0;
transition: visibility 0s, opacity 0.5s linear;
}
div:hover > ul {
visibility: visible;
opacity: 1;
transition-delay:2s; //set delay here
}

Protractor/Selenium with Angular overlay, other element would receive click

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.

How to "zoom"/"scale" in div's content with css or jquery?

The effect I am trying to achieve needs to keep the center in its place and zoom in the content while still maintaining the width and height of the div.
An example:
before -> after
[x] [X]
Or if you don't mind links this site has it implemented on the homepage and its square containers
I have tried using the inspect element feature, but didn't really find any javascript calls or css on it. And google also didn't give me any tutorial, guess it's hard to name this effect.
Therefore, if someone could be so kind and forward me to a tutorial, function or give some tips I would greatly appreciate it.
Looking forward yo your replies.

You're looking for CSS Transforms.
On the website in question, this is implemented by way of
.view-tenth img {
/* [other directives omitted] */
transition: all 0.6s ease-in-out 0s;
}
.view-tenth:hover img {
/* [other directives omitted] */
transform: scale(1.1) rotate(0deg);
}

CSS transition on click

I'm working on creating a mini-sort plugin with jquery.
I want to have the option to trigger css animations on click event, but I found out animation don't get triggered on elements that have been hidden using display: none;.
I tried with creating a class and applying that class to the element but this won't work.
$('.legend li').on('click',function(){
var thisClass = $(this).attr('class');
$('div').not('.'+thisClass).removeClass('active');
$('div.'+thisClass).addClass('active');
});
I found a plugin which has the same functionality that I wan't but I would like to try to build something smaller and I always like to attempt myself as a learning experience before resorting to plugins. I'm a bit confused as to how they run the animations. It looks like inline css but when I tried to add inline transitions there was no effect. Even though I could see the transitions in the style tag.
Edit
Here is a fiddle.
http://jsfiddle.net/NktDU/1/

You could use jQuery's hide and show instead
Updated demo
$('#grid div').not('.'+thisClass).hide("fast").removeClass('active');
$('#grid div.'+thisClass).show("fast").addClass('active');
and remove display:none from the CSS
Or you could do it just using CSS transitions and toggling the width, like so
#grid div {
display: block;
height: 20px;
width: 0px;
margin:0px;
float: left;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
transition: all 1s ease;
background: black;
}
#grid .active {
width:20px;
margin: 2px;
}
Demo for that

I think the library you would have to write for something like this is immense. In this case, I highly recommend you work on implementing Isotope by David DeSandro.
Is this the plugin you were talking about? I can assure you that while you want to come up with your own solution, you can make isotope your own. I've implemented it a couple of times. You will learn a lot, while at the same time, learning how jQuery/JS/CSS (and media queries) work together.
I've implemented the click to sort, and I also created my own sort by keyword search. I can put together a couple of fiddles if you want...
Edit:
I just saw the link to the plugin you found... it actually uses isotope's framework and recommends you use isotope in certain situations.
Good luck!