I use google fonts to show some h1 tag. Initially, this h1 tag is hidden using:
visibility: hidden;
opacity: 0
I then slowly reveal the text when you hover over it with the following:
.content:hover{
visibility: visible;
opacity: 1;
transition: opacity ease-in-out 1s;
}
See here for demo: http://codepen.io/gosusheep/pen/oXEyve
Whenever the content becomes fully visible, it jumps a bit.
This jumping does not happen when the content is already visible.
This content does happen with other non-websafe fonts (e.g. Georgia).
Does anyone know a way around this?
After adding a margin: 20px, everything works as expected. I was able to keep the transform as well.
What I believe is happening is that the font requires more space than the content div actually has. When opacity reaches 1, the text is fully rendered and goes outside the bounds of the div, causing a small shift.
the problem is not with the visibility, the problem is the transform and transition together, try center the content with top: 50%; and margin-top: negative_half_of_the_div_heigh;.
Related
Heyy.
I've been trying to figure this out and I've looked all over but so far nothing's worked so I thought maybe you could help me out.
I'm working on a new tumblr theme with masonry and I want the post captions to slide down when a post is hovered on. I got that bit working but the problem is the post underneath the one hovered won't be pushed down when the caption opens, and that means that bigger captions will be hidden behind that post.
Here's the code I have:
.c220 {
max-height: 0;
transition: max-height 1s ease-out;
overflow: hidden;
background: white;
}
.p200:hover .c220 {
max-height: 500px;
transition: max-height 1s ease-in;
}
And here's the link to see it live: https://thm-maddison.tumblr.com/
The captions I have aren't too big so they don't get hidden but I'd like the post below them to be pushed down about 60px if that's possible.
Thank you for your help and I wish you all a great 2017!
You need to do this without applying position: absolute; to the <article class="p200... elements. Absolutely positioned elements are outside of the html element flow.
I'm building an application and on mobile we have a panel that slides in and takes up 100% of the viewport. This is has the position:fixed attribute attached to it. At the top of the panel I have a "back to" link, which is a <p> with an anchor <a>Back to...</a> inside it.
Now what I'm trying to achieve is to affix this to the top of the page so that when the user scrolls down the page the "back to" link is always at the top of the page. The reason for this is that the panels can often contain a lot of information, especially on mobile. I do not want to use Javascript as I'm hoping there is a way around this with CSS.
I've tried giving this <p> a position:fixed attribute but as it's containing block is positioned fixed it doesn't do anything! Is there a way around this issue? Has anyone done something similar before ?
HTML
<div id="panelDiv">
<p>Back to...</p>
......
Panel content goes here
......
</div>
CSS
#myDiv {
bottom: 0;
left: 0;
overflow: scroll;
padding: 0.85714em;
position: fixed;
right: 0;
top: 0;
transform: translateX(-100%);
transition: transform 350ms ease-in 0s, opacity 350ms ease-in 0s;
z-index: 9999;
}
p {
position:fixed;
top:0;
}
Now, what I think is happening is that because the container is already fixed, the browser already keeps the container fixed to the top and therefore when I add the same to the containing element it doesn't do anything. Is there a way around this?
I have a weird problem with my personal website. Let me explain the context:
I have some stacked sections which have to be (each one) the same height as browser window. That is, if the browser window has 500px of height and I have 5 sections, the whole website would be 500*5 = 2500px height.
If I just define my sections with height: 100% them remain 0px height. To solve that I used the next trick:
html, body {
height: 100%;
}
This way, the container of the sections (the body) has also 100% height of the browser window, so my sections now have the desired height.
But after that, I want that the background color of the body changes depending on the section we are. This causes an strange problem. The color doesn't change in a logical way. Better see it on my website. This seems to be related with the fact that the body is actually smaller than my website. Remember, my body has 100% height (for example, 500px) and my website 100% * number of sections (2500px). But I'm not really sure about that because I tried to reproduce the error on a simple fiddle and I can't.
A curious thing is if you mouseover my website logo (which have a transition animation related with a rotation transform) the background change its color correctly. Something related with website refreshing, I suppose.
By the way, the color of the body is also changing with a transition, but you can disconnect it on the inspector if you want. That seems no to be the problem.
If you need more information please ask for it. Thank you for your help and attention.
PS: This happens on Chrome 32. In Firefox all works. So compare both browsers to understand better the problem, if you want.
I partially solved the problem with pseudoelements (then, I don't lose the semantics of my html) but I'm not satisfied because I think it has to be a better and cleaner way.
I put all the sections inside a div called "main-content" (of the website). Then I also defined this div with height: 100% (otherwise the height trick stops working). Then I define a before pseudoelement with this css:
#main-content:before {
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
-webkit-transition: background-color $speed;
-moz-transition: background-color $speed;
-o-transition: background-color $speed;
-ms-transition: background-color $speed;
transition: background-color $speed;
}
And then I attach to this fixed layer pseudoelement all the changing background color code, instead of using body. This works, but fixed elements and mobile browsers aren't good friends. So I think that this problem deserves a better solution.
I do opacity transition on img element as it is in here and i see that img size changing or img is moving when transition on end or start;
Here is simple css code for styling.
img{
height:165px;
width:165px;
opacity:0.4;
transition: all linear 1s;
}
img:hover{
opacity:1;
}
I tested it on Chrome 31 version. How can i get rid of this problem ?
Edit: This problem appears when Chrome browser is in bigger zoom like 110% or 125%
Seems to be a bug in Chrome, just transitioning the opacity makes no difference for me.
Apply a 3D transform, of nothing, to resolve the issue.
-webkit-transform: translateZ(0);
I don't see the movement but you can try with just the specific property instead of all:
transition: opacity linear 1s;
The demo http://jsfiddle.net/cKUFD/4/
I Had the same problem, so i tried different images in this fiddle:
https://jsfiddle.net/s04428yc/15/
The first image works fine, while the second contracts on hover.
So i came to the conclusion that the image ratio is causing the problem.
And the solution was, like #addedlovely already stated:
-webkit-transform: translateZ(0);
and this should be applied on the element without the hover pseudo selector.
Or one could simply change the actual image ratio.
Adding a 1px transparent border to the right of the element fixed this for me. I had a grid of images with no space at all between them, and this bug would cause some of them to expand by 1 pixel horizontally when the transition happened.
-webkit-transform: translateZ(0); does work, however, it also changed the width of some of the images by 1px permanently. (This fix also changes the width of the images by 1px permanently, but at least it's consistent.)
I ended up liking the look of a 1 pixel border more anyway and so I kept it, but this obviously won't be a fix for everyone because it changes the look of your page.
I have a page with a text input like the one you can see in this fiddle
Source
Easier to see on JSFiddle...
Notice how the input is slightly off vertical center when you first visit the page. Now click on the text input and watch a set of extra controls expand. Now the text input jumps up to perfect vertical center. Bluring the text input causes the controls to collapse and the text input is no longer at vertical center.
Note: the extra controls will not hide if you enter at least one letter in the text input.
Does anyone have any idea why the input won't stay at vertical center?
Thank you for your time.
It seems to be going off center because the "hidden" state of your controls, although not viewable, is still being rendered in the DOM. However, unlike your "active" state, the "hidden" state's width is declared as 0, causing all the elements to wrap together. This is affecting the vertical height of that element, causing the discrepancy.
I get what you're going for, but the current way you're setting up the CSS won't get you there I don't think. Your current way of centering is dependent entirely on the margin-top: 30px declared on your .options class. What would probably work better is wrapping both the .input and the .options class in a container class, and do your vertical centering there.
Here's an example of what I mean: http://fiddle.jshell.net/YuZHg/6/ (although you can still see the slight wrapping happening on the transition)
A far more solid way to center inline elements vertically is to set line-height to the same value as height.
Add this:
section.explore header {
line-height: 100px;
}
Remove this:
section.explore header div.input {
display: inline-table;
}
And change your <div>s to <span>s so both options and search bar are inline/inline-block elements.
jsFiddle
Of course your transitions are broken now and you'll need to use a different method.
EDIT: After a bit of fiddling I got it mostly working jsFiddle, mostly by removing a bunch of styles :P The width transition doesn't work yet though.
The main issue, by the looks of things is the height on your options div is adding to the container block and pushing down the input.
The css for this is :
section.explore header div.options {
-moz-transition: all .25s ease-in-out;
-ms-transition: all .25s ease-in-out;
-o-transition: all .25s ease-in-out;
-webkit-transition: all .25s ease-in-out;
transition: all .25s ease-in-out;
-moz-opacity: 0;
-ms-opacity: 0;
-o-opacity: 0;
-webkit-opacity: 0;
filter: alpha(opacity=0);
opacity: 0;
display: inline-block;
height: 0;
margin-top: 33px;
max-height: 30px;
max-width: 0px;
overflow: hidden;
position: relative;
text-align: left;
width: 0px;
}
The problem is your a combination of the height, max-height.
There are much easier ways to achieve what you're trying though:
If you know the heights of each of the elements and responsive layout isn't a consideration, just position them accordingly using absolute positioning.
Here's a good article on vertical alignment:
http://css-tricks.com/centering-in-the-unknown/