Current Behaviour:
When hovering over a card/item in the grid. The extra information becomes visible (both margin -100% and position: absolute give the same result). When the information gets enabled with (content-visiblity: visible) it appears behind the next row not matter the z-index value.
Wanted/expected behaviour:
The information gets visible on and shows on top of all other content
Environment
Wordpress 6.0 (latest)
Theme: Hello Elementor
Page Builder: Elementor
DOM View and actual visual
Current CSS
selector:hover .non-hover-content {
content-visibility: hidden;
}
.hover-content {
position: relative;
z-index: 2;
content-visibility: hidden;
background-color: #1a1a1a
}
selector {
position: relative;
z-index: 1;
transition: all ease-in-out .25s;
border-radius: 10px 10px 0 0;
}
selector:hover .hover-content {
content-visibility: visible;
background-color: #1a1a1a;
}
selector:hover {
transform: scale(1.05);
box-shadow: 0 0 10px 0px #222;
/*background: var(--e-global-color-secondary);*/
}
Related
I'm trying to create a box with label on left top angle. This label must slide on mouse over.
When I hover on this box In Safari Browser (Mac OS El Capitan) I watch the following bug: http://newsletters.loginov.biz/1.png
When the transition is complete yellow label becomes ok (clipping is well).
NB! I discovered that this happens when the viewport width is odd. (You can resize browser step by step to see this problem).
Any ideas?
.box {
position: relative;
overflow: hidden;
left: 50%;
margin-left: -100px;
width: 200px;
height: 200px;
background: #212121;
box-shadow: 0 0 8px rgba(0,0,0,.13);
-webkit-transition: box-shadow 250ms;
transition: box-shadow 250ms;
}
.box:after {
position: absolute;
z-index: 1;
top: 0;
right: 0;
border-left: 60px solid transparent;
border-top: 120px solid #ffcc32;
content: '';
-webkit-transform: translate(30px, -60px);
transform: translate(30px, -60px);
-webkit-transition: transform 250ms;
transition: transform 250ms;
}
.box:hover {
box-shadow: 0 0 45px rgba(0,0,0,.35);
}
.box:hover:after {
-webkit-transform: none;
transform: none;
}
<div class="box">
<img src="http://s.appleinsider.ru/2016/06/macOS-Sierra-Wallpaper-iPhone-Plus-Wallpaper.jpg" alt="test img" />
</div>
I know, this is not an elegant solution, but helped me with exactly the same problem.
In my case there were multiple elements in row and issue was reproduced when wrapper element was centered. So when wrapper has odd width while viewport has odd width too it can't be perfectly centrified in Safari (the same for even width). So your wrapper had to have an opposite fold.
JQuery in my solution is for fast add/remove class - you can use your own methods.
var $wrapper = $('.wrapper'), fixSafariSubpixelDelay;
function fixSafariSubpixel() {
clearTimeout(fixSafariSubpixelDelay);
fixSafariSubpixelDelay = setTimeout(function() {
if (window.innerWidth % 2 == 0)
$wrapper.removeClass('even').addClass('odd');
else
$wrapper.removeClass('odd').addClass('even');
}, 100);
};
window.addEventListener('resize', fixSafariSubpixelDelay);
Demo
http://tympanus.net/Development/ResponsiveMultiLevelMenu/index2.html
After clicking on the hamburger menu icon, the menu displays.
This is the original CSS for the menu:
.dl-menuwrapper .dl-menu {
backface-visibility: hidden;
margin: 5px 0 0;
opacity: 0;
pointer-events: none;
position: absolute;
transform: translateY(10px);
width: 100%;
}
Desired Behaviour
I want to move the menu down from margin-top: 5px to margin-top: 34px, ie:
margin: 34px 0 5px 0px;
Actual Behaviour
When I change this property in Firebug however, during the animation that occurs when navigating to a submenu, the menu bumps up to its original position, and then bumps back down when the animation is finished.
I want the menu to maintain its vertical position during the animation.
I've been watching the CSS changes in firebug and I still can't figure out how to enable this.
The menu seems to animate from:
Submenu Closed State
<ul class="dl-menu dl-menuopen">
Submenu Open State
<ul class="dl-menu dl-menuopen dl-subview">
In between these 2 states there is another class applied:
<ul class="dl-menu dl-menuopen dl-animate-in-2">
or:
<ul class="dl-menu dl-menuopen dl-animate-out-2">
What I Tried
The common class in all these states is dl-menuopen, so I tried:
.dl-menuopen {
margin-top: 34px !important;
}
But still got the "bumping up" effect during the animation.
Then I tried adding:
.dl-animate-in-2, .dl-animate-out-2 {
margin-top: 34px !important;
}
But the menu still gets nudged up a little.
I also tried:
.dl-animate-in-2, .dl-animate-out-2, .dl-menu {
margin-top: 34px !important;
}
But the animation is still jittery.
How can I maintain margin-top:34px throughout the animation?
This seems to work:
Was:
.dl-menuwrapper .dl-menu {
backface-visibility: hidden;
margin: 5px 0 0;
opacity: 0;
pointer-events: none;
position: absolute;
transform: translateY(10px);
width: 100%;
}
Changed to:
.dl-menuwrapper .dl-menu {
backface-visibility: hidden;
margin: 0px !important; /* change here */
opacity: 0;
pointer-events: none;
position: absolute;
transform: translateY(10px);
width: 100%;
}
Was:
.dl-menuwrapper > .dl-submenu {
left: 0;
margin: 0;
position: absolute;
top: 50px;
width: 100%;
}
Changed to:
.dl-menuwrapper > .dl-submenu {
left: 0;
margin: 0;
position: absolute;
/*top: 50px;*/ /* change here */
width: 100%;
}
And added margin-bottom: 34px to .dl-menuwrapper button.
Trying to do a button hover effect I stumbled upon this weird bug on IE.
It's happening even on IE11.
When you hover over the button the pseudo elements 'jump' their transition.
If you remove the padding, it stops!
I've been trying to work around it the whole afternoon, but I can't seem to find the problem.
Here's the demo: http://codepen.io/anon/pen/rVwRKL
HTML
Live Button
CSS
body
{
padding: 5em;
margin: 0;
}
a{
padding: 1em 1em;
margin: 0;
box-shadow: inset 0px 0px 0px 3px blue;
position: relative;
box-sizing: border-box;
display: inline-block;
}
a::before,
a::after
{
transition: width 0.4s ease, height 0.4s ease 0.4s, opacity 0.4s ease;
content: " ";
box-sizing: border-box;
width: 100%;
height: 100%;
display: block;
position: absolute;
border: solid 3px green;
display: inline-block;
}
a::after
{
right: 0;
bottom: 0;
border-right-color: transparent;
border-top-color: transparent;
}
a::before
{
left: 0;
top: 0;
border-left-color: transparent;
border-bottom-color: transparent;
}
a:hover::before,
a:hover::after
{
transition-delay: 0.4s, 0s, 0.7s;
width: 0;
height: 0;
opacity: 0;
}
Thanks!
Not sure if you ever got an answer to this Marlon but I've just come across basically the same issue with IE. Thankful I've managed to figure out the oddity in IE that is causing the issue.
It appears to be when you are mixing your measurement prefixes i.e. px, %, em, vw, etc...
In my issue I was going from a vw to px - this worked fine everywhere except IE. As soon as I changed my vw to a px everything worked fine.
In your example above it was even less obvious to spot. You have the before/after set to a width of 100% - % being the measurement. Then, in the hover state, you had them both simply set to 0 (zero) with no measurement. This is where the problem is because no measurement isn't the same as % which IE appears to struggle to figure out (?!?!?!). As soon as you add the % to the width/height on the hover state it works fine.
See working example here with the adjusted width/height: http://codepen.io/anon/pen/YyNWzw
Previous CSS
a:hover::before,
a:hover::after
{
transition-delay: 0.4s, 0s, 0.7s;
width: 0;
height: 0;
opacity: 0;
}
Adjusted CSS
a:hover::before,
a:hover::after
{
transition-delay: 0.4s, 0s, 0.7s;
width: 0%;
height: 0%;
opacity: 0;
}
Typically I would also never bother adding a measurement when the value is 0 (zero) but I guess if you're using transitions then IE requires it to match.
Hope this helps.
I have a word press site running the "The Retailer" theme. For some reason the sticky header does not appear on 1024 resolution. It works fine for any resolution above that.
Website: http://museiam.ca/
Here is my CSS for sticky header:
.gbtr_header_wrapper.site-header-sticky {
margin: 0;
padding: 25px 0;
position: fixed;
}
.site-header-sticky {
background: none repeat scroll 0 0 #fff;
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
display: block;
right: 0;
top: -98px;
transition: top 0.15s ease 0s, z-index 0s ease 0.15s;
width: 100%;
z-index: -1;
}
.site-header-sticky.on_page_scroll {
top: 0;
transition: top 0.3s ease 0s;
z-index: 9999;
}
Thanks for looking.
Line 13822 of style.css
#media screen and (max-width: 1024px)
{
/*sticky header*/
.site-header-sticky
{
display: none;
}
just remove
.site-header-sticky
{
display: none;
}
to make the sticky header continue to appear
but I would advise you against doing that because it will break the mobile styles
I was following a guide for making a ribbon with CSS. However, I attempted to modify this by adding a CSS3 Animation to the position, as seen in this JSFiddle.
As you can see, with the animation, the main ribbon element falls behind the :before & :after pseudo-elements, instead of above them as it should (and does without the animation). I've tried explicitly setting the z-index on all elements but it doesn't seem to affect this. Does anyone know why this would be happening, or what I can do to fix it? For the record, I'm viewing through the latest Google Chrome and am not worried about cross-browser compatibility for the moment. Thank you!
Here's the ribbon code:
.ribbon {
font-size: 16px !important;
/* This ribbon is based on a 16px font side and a 24px vertical rhythm. I've used em's to position each element for scalability. If you want to use a different font size you may have to play with the position of the ribbon elements */
width: 50%;
position: relative;
background: #ba89b6;
color: #fff;
text-align: center;
padding: 1em 2em;
/* Adjust to suit */
margin: 2em auto 3em;
/* Based on 24px vertical rhythm. 48px bottom margin - normally 24 but the ribbon 'graphics' take up 24px themselves so we double it. */
/*CODE I ADDED*/
animation: flyRibbon 30s linear infinite;
-webkit-animation: flyRibbon 30s linear infinite;
}
.ribbon:before, .ribbon:after {
content:"";
position: absolute;
display: block;
bottom: -1em;
border: 1.5em solid #986794;
z-index: -1;
}
.ribbon:before {
left: -2em;
border-right-width: 1.5em;
border-left-color: transparent;
}
.ribbon:after {
right: -2em;
border-left-width: 1.5em;
border-right-color: transparent;
}
.ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
content:"";
position: absolute;
display: block;
border-style: solid;
border-color: #804f7c transparent transparent transparent;
bottom: -1em;
}
.ribbon .ribbon-content:before {
left: 0;
border-width: 1em 0 0 1em;
}
.ribbon .ribbon-content:after {
right: 0;
border-width: 1em 1em 0 0;
}
Here's the animation code:
#keyframes flyRibbon {
100% {
transform: translateX(200vw);
-webkit-transform: translateX(200vw);
}
}
Adding a div around the ribbon and applying the animation css to it instead of to the h1 element should fix this.
HTML:
<div class="container">
<h1 class="ribbon">
<strong class="ribbon-content">Everybody loves ribbons</strong>
</h1>
</div>
CSS:
.container {
animation: flyRibbon 30s linear infinite;
-webkit-animation: flyRibbon 30s linear infinite;
}
JSFiddle
This is not a bug. This is a specified behavior of z-index for elements that create stacking contexts, and .ribbon creates a stacking context because it has transform (in the animation). With transform, the element becomes the root of the stacking context and no child box can be placed below it.
As a workaround without extra markup, you can give the inner contatiner block display and position it above the ribbon ends, like in this example.