The wordpress theme I have, NeoBeat is causing my logo at top to be blurry.
My site is earthcry.net
The CSS for the image above is
opacity: 1;
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
It's actually being caused by this css here which is reducing the size and causing the blur:
#qodef-page-header .qodef-header-logo-link img {
display: block;
margin: auto 0;
width: auto; // Comment this out or delete
max-height: 100%; // Comment this out or delete
-webkit-transition: opacity .3s ease;
-o-transition: opacity .3s ease;
transition: opacity .3s ease;
}
If you get rid of those, it shows at it's intended size.
This is actually a relatively common issue with using the (relatively old hat) method of vertical centering with absolute positions. A quick search here, The Goog, The duck site, etc, will show many results for "blurry <element> with transforms`.
The easiest and most pragmatic way to deal with this is to not use the "absolute/50%/transform -50%" method to center elements, and upgrade to using flex, align-items: center and justify-content: center. There's all sorts of hacky ways to fix the blur, but you'll need to cycle through them and find which works for you (basically, it's being perfectly centered in a 69px tall element so it's got half a pixel on each side of center to deal with that it can't place, so it aliases it.)
However, with all of that said, it looks like you don't actually need a centering mechanism at all.
All you need to do is remove the actual position overrides and transforms. Here's your logo as it stands (it seems to be correct on mobile).
If you instead just used:
opacity: 1;
position: absolute;
It would look just fine:
Just remove the top, left and vendor-prefixed transform: translateY and you should be good to go.
(The previews in the answer may be blurry, click on them to open them up though, I promise the latter one is crisp, lol)
I have tried a flip menu with the bootstrap dropdown menu using transform. The flip is working fine but the drop-down menu is rendering underneath the form elements even though z-index is present for the drop-down menu.
Upon reading, I understood its the stacking context issue when using transform but I couldn't able to figure out the solution.
The code is available here code link. The z-index is not applying due to the below code.
.frontbar {
transform: translateY(0%) rotateX(0deg);
transition: all 0.5s;
transform-origin: 50% 100%;
}
.menubar {
transform: rotateX(-90deg);
transition: transform 0.5s;
transform-origin: 50% 0%;
}
Click the Flip button
click on the menu, the submenu in the dropdown is underneath the form elements
You need add the z-index to the parent :
.wrapper.flip { z-index: 2;}
I have created a simple slide out menu from the left of a page by simply applying a CSS Transition to a div. The div has the following CSS class:
#slidingBox {
position: absolute;
width: 400px;
height: 100%;
background-color: #d9dada;
top: 0px;
left: 0px;
margin-left: -390px;
-moz-transition: all 0.3s ease-in-out;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
overflow-y: scroll;
}
#slidingBox:hover {
margin-left: 0px;
}
and it works okay. I have 10px of the menu on the side that when I hover over it the whole panel becomes viewable. However, as soon as I move my mouse off the DIV it scutters back into hidding... Fair enough, thats how this hover over transition works I guess. I would however like to put a little pin button in the corner I can click which will then keep the menu visible. Also, the menu currently appears 'over' the page on screen - when 'pinned' I would also like the page underneath to resize so it is all viewable next to the pinned menu.
I could sit and play around with it for a bit but time is off the escence and if someone could point me in the right direction would be a great help!
I understand there are many different/better ways of doing what I have already done here so any other pointers would be a great help.
You could use jQuery to detect when the pin button is clicked and remove a class from #slidingBox to keep it expanded:
$('#pin-menu-button').click(function() {
$('#slidingBox').toggleClass('no-pin');
});
The .no-pin class is what gives the sidebar menu the negative left margin.
To make the pinned menu and content display side-by-side you could use flexbox styling. Make sure you set display:flex; for the container around the sidebar and main content area.
Here is a fiddle
I've been building a website in Safari, and I've just tested it in Firefox and my fixed navigation elements are behaving as if they're position is absolute.
#navigation {
display: block;
width: 100%;
height: 50px;
position: fixed;
left: 0px;
bottom: 0px;
text-align: center;
z-index: 99000;
}
This is the CSS I have for the primary navigation wrapper (it's a bottom nav.). In Webkit, it works perfectly: that is, it sticks to the bottom of the window regardless. In firefox, it positions itself at the end of the tags, so, for example, on a long page, I'd have to scroll down just to see it. It is acting as if it's absolute.
I also have a sidebar navigation.
.slidebar {
display: block;
position: fixed;
left: -1px;
top: -1px;
width: 1px;
height: 100%;
overflow: hidden;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
-ms-transition: all 300ms ease;
transition: all 300ms ease;
z-index: 99998;
}
This sidebar is also acting as if it's absolute - that is, it is positioning itself off the screen properly, but it's elongating <body> and thus the horizontal scrollbar appears. The height: 100%; is also responding to the <body> height and not the window height, so, for example, my <header> has a top margin of 20px, and the slidebar observes that margin too (the body has 0 margin). Likewise, instead of the height: 100%; ending at the bottom of the window, it ends at the bottom of the <body>, factoring in the footer's bottom margin.
I cannot understand for the life of me why this is happening. Element inspection shows all the properties are loading fine, and in Chrome and Safari it works. It worked initially, and it worked the last time I even edited either navigation, but it has since stopped working since I built other, irrelevant, parts of the site.
http://www.upprise.com/demo.php - click the Envelope icon to see the sidebar
I had the exact same problem, turns out the following CSS property of a parent element was causing the problem.
transform: translate3d(0px, 0px, 0px);
Through the process of elimination I was able to determine that having the following in my body was causing all the problems with fixed divs in Firefox:
-o-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
I had originally added this code to prevent flickering in certain CSS transitions throughout the site, but I guess I'll have to add it to each individual class now.
It appears that some browsers will will apply fixed positioning relative to the window, while Firefox is applying it relative to the <body />. You need to make your body 100% tall:
body {
height: 100%;
}
But the margin from your .header is collapsing outside of the body element. Change this:
margin: 25px auto;
to this:
margin: 0 auto; /* updated - thanks JoshC */
padding: 25px auto;
I solved the issue by moving the element that uses position: fixed; out of its original parent element that uses transform: translateX(-50%);.
Thus...
<div class="transformed-container">
<div="fixed-element"></div>
</div>
...became...
<div class="transformed-container"></div>
<div class="fixed-element"></div>
Two things led me to this conclusion:
#Pankaj's answer shows that the translate value can cause an issue.
#Wildhoney's comment to another answer references an explanation of the underlying cause: http://meyerweb.com/eric/thoughts/2011/09/12/un-fixing-fixed-elements-with-css-transforms/
The problem seems to be in your body, i've added width:100%; height:100%; and overflow:hidden; to it in my fire fox and it looked just fine, except for the bottom menu-bar that went half of it's height over the bottom.
Not sure why the browsers were rendering differently, though the solution is pretty simple. You need to give the parent elements (html/body) a height of 100% in order to fill the entire page. It seems like FF rendered the fixed elements at the bottom of the contents as opposed to the bottom of the window. Adding the following will make it work across browsers:
html, body {
height: 100%;
}
In addition, you should also use padding on .header element as opposed to a margin. This will solve another issue.
.header {
margin: 0 auto; /* use a value of 0 rather than 25px */
padding: 25px 0;
}
I tested all this in the browser, it will work in FF now. It should also render properly in Chrome and others.
I needed to remove some css classes from the superior container of the fixed-on-scroll element that had a transition, from the animateCSS library.
$(window).on('scroll', function () {
if (distance <= 65) {
$('#my-contaniner').removeClass('animated fadeInLeft'); //delete problematic classes for FF
Add your code
});
Maybe it helps
After 5 hours of debugging, if you are using tailwindcss and you have drop-shadow-* (pay attention it's not shadow-*) class on one of your parent elements, it will cause the fixed elements within that element to act like they're absolute positioned.
Not sure why that is happening, maybe due to fact that tailwindcss is using lots of combined CSS variables.
Here's an example of what gets generated with tailwindcss drop-shadow-* utility, seems like filter property on one of the parent elements causes the same unexpected behaviour as transforms:
.drop-shadow-lg {
--tw-drop-shadow: drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
filter: var(--tw-filter);
}
I am trying to create a menu that fades in/out when a button is clicked, and I am trying to do the animation using CSS transitions.
Here is a sample of what I want to achieve
#menu{
background: red;
display: block;
overflow: hidden;
position: absolute;
width: 182px;
top: 1em;
padding: 0;
height: auto;
opacity: 0;
/* The menu must not be clickable/cover the UI once hidden */
left: -100000px;
/*
The left property must change after the
opacity is zero and before it starts to
increase
*/
transition: opacity 0.25s 0.1s, left 0s; /* ??? */
-webkit-transition: opacity 0.25s 0.1, left 0s; /* Safari */
}
#menu.open{
opacity: 1;
left: auto;
}
http://jsfiddle.net/AzKAk/5/
Of course that only works half way, when the menu appears it DOES fade in, but when it has to fade out, this must happen after the element has its proper position.
Is it possible to do such thing using only CSS3?
I am assuming your intention is to have the menu appear/disappear in-place without any movement.
To do that you actually have to use a combination of two properties: opacity, and display.
The change in opacity will make the menu disappear, but once it reaches opacity:0 it will be invisible but still exist and receive user interaction.
So, you have to make sure that after the opacity transition is done, you have to change the display to none.
You can do this using the transitionend event (webkitTransitionEnd on Chome/Safari).
Your code would look something like this: http://jsfiddle.net/daniran/GfbVV/
I'm using jQuery in the example, but you can just as easily register the listeners directly using ontransitionend property;