I've been going crazy about that and haven't found a solution yet, any content in the div gets blured for some reason if a transform is being applied.
Though this only happens in chrome.
I've tried using the Webkit style declaration : -webkit-font-smoothing but I didn't succeed.
The div CSS:
#divId {
width: 100%;
height: 100%;
-webkit-transform: translateX(-52%);
transform: translateX(-52%);
}
below are 2 images showing the difference with and without the transform,
the first is with transform and the second is without the transform. thanks
try moving the div without transform
like using { position:relative;left:-52%;}
transform usually changes the quality of a text or img ( like translate or scale ) and as far as i know there is no 100% accurate work around about this
Related
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;.
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.
Please check the demo
I have two divs the first div is used for showing the scroll-bar and the second div is used for the rotation of inner contents of the div.
My question is why scroll-bar is showing even if there is no overflow of the inner contents.
Please check the demo and tell me what I am doing wrong here and how to overcome this issue or any alternative way to achieve this.
HTML
<div style="width: 1096px; height: 434px; overflow: auto; position: relative; border:solid 5px #555555">
<div id="RotationDiv">
<img style="left: 54px; top: 337px; width: 326px; height: 422px; position: absolute;" src="http://fc01.deviantart.net/fs70/f/2012/304/6/b/walfas_custom___vending_machine_2_by_grayfox5000-d5jljhe.png" />
</div>
</div>
CSS
#RotationDiv {
-ms-transform-origin: 539px 539px;
-webkit-transform-origin: 539px 539px;
width: 434px;
height: 1096px;
overflow: visible;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
background-color:Red;
}
You are using transform so it changes visual formatting model of an element.
From MDN:
The CSS transform property lets you modify the coordinate space of the
CSS visual formatting model. Using it, elements can be translated,
rotated, scaled, and skewed according to the values set.
A line again from MDN:
By modifying the coordinate space, CSS transforms change the position
and shape of the affected content without disrupting the normal
document flow. This guide provides an introduction to using
transforms.
From W3C : 2 Module Interactions
This module defines a set of CSS properties that affect the visual
rendering of elements to which those properties are applied; these
effects are applied after elements have been sized and positioned
according to the Visual formatting model from [CSS21]. Some
values of these properties result in the creation of a containing
block, and/or the creation of a stacking context.
So you have a parent element with the dimensions below.
width: 1096px;
height: 434px;
Now you are transforming that element using
-webkit-transform: rotate(90deg);
So here, the element transforms visually, but not literally, in other words though you transform an element, it takes the space physically on a document just like a static element takes, it just visually transforms the element. I will share a diagram which will make you understand in a better way..
So though you transformed your element like this, but still the vertical space was taken up because of the height of your transformed element, which did transformed visually, but not literally...
So, now what's the solution? Use position: absolute; on the child element, and anyways you are using position: relative; on the parent.
Demo
#RotationDiv {
-ms-transform-origin: 539px 539px;
-webkit-transform-origin: 539px 539px;
width: 434px;
height: 1096px;
position: absolute;
overflow: visible;
-ms-transform: rotate(90deg);
-webkit-transform: rotate(90deg);
background-color:Red;
}
Lets have a test case, I've the styles like below
.parent .transformed {
height: 200px;
width: 200px;
background: #f00;
-moz-transform: rotate(120deg);
-webkit-transform: rotate(120deg);
transform: rotate(120deg);
-moz-transform-origin: 300px 300px;
-webkit-transform-origin: 300px 300px;
transform-origin: 300px 300px;
}
.parent .static {
background: #00f;
height: 200px;
width: 200px;
}
Test Case
Here, I am transforming an element having class of .transformed so if you see, the element does transform and am also modifying the origin, but the next box won't move up, as the transformed element take up literal space in the flow, it doesn't get out of the flow like position: absolute; does, but well that's the separate concept.
So you need to use position: absolute; or your div will still take up space vertically and thus you see that scroll bar ...
Poopy IE Compatible Solution
As you commented, well, yes, IE will still show the scroll bar as the element which is positioned absolute still exists in the same dimensions, so what's the workout here?
Firstly, you are transforming the element to set in the parent container, also, you don't need the overflow so the first question is if you don't need overflow than why use auto? You can use hidden.
If not hidden to the parent, and you are looking forward to place some content beneath the transformed element, than better you wrap the transformed element inside another element with the same dimensions set to overflow: hidden; and make sure you move the position: absolute; property to this block. - Demo
If still not happy? Then why transform entire element? transform relevant image only - Demo
This is because it is still using the vertical properties (Just as hmore009 said in the comments).
If we take a look here you can see what its doing so you know this is true.
Example 1:
So your height and width for the container are as follows:
width: 1096px;
height: 434px;
Now you have done the right thing and swap them for the transform #RotationDiv:
width: 434px;
height: 1096px;
This works fine if we were to change the container to overflow: hidden; this means we cant see any extra height.
DEMO HERE
Example 2:
But I guess for some reason you don't want to do that, probably due to not knowing why the overflow is caused. So lets take a closer look at what is going on.
If we remove the height from #RotationDiv the overflow is no longer there. Thats a bit wired isn't it? Well no, the height was was being used for both the transform and the vertical height.
DEMO HERE
So how can we know it was the height causing this?
Now if we give #RotationDiv the same height as the container we can see there is no overflow.
DEMO HERE
Now if we add 1px onto that height we get the overflow kicking in. Hmm, so the height must be causing this. Even tho we are transforming the height seems to still be being used for the vertical height in the container.
DEMO HERE
How can we fix this?
Well we already have seen one option, give the container overflow: hidden; or just removing it altogether. This will stop the scrolling within the container.
DEMO HERE
Or you could just get an image editor (there are some free online ones) and flip the image like that. Would save a lot of trouble doing it this way.
Other then that you could flip the image only remove #RotationDiv and give the container background: red;
DEMO HERE
How I would do it still using transform:
I would take off the overflow: auto;, remove the unneeded div and set the transform on the img.
It's up to you how you want to do it, there are many ways. The best way I would say it don't use transform and just flip the image using an image editor (e.g. Photoshop).
DEMO HERE
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 png grpahic with several icons on it. This project is targeting accessibility so rather than use divs with brackground-image and background positioning, the client would like img tags and alt attributes. We're using Twitter bootstrap which sets img{max-width: 100%;} This image is rendered inside a table cell that has a 50px by 50px dimensions. The image is 329px by 100px. This make the image super tiny and also shows all the icons of course. I was thinking of using css clip and provide classes to show the piece of the graphic I want. What is the correct approach here? I'm setting td { position: relative;} and img { max-width: none; position: absolute; clip: rect(9px, 184px, 34px, 155px) } It seems hacky to me to be doing it this way. Is there a better approach I could be using? I just want to leverage the screen readers features for images as well good html design principals. My css (LESS syntax) looks like this
.tinytable img {
max-width: none;
background: red;
&.onetime {
position: absolute;
clip: rect(9px, 184px, 34px, 155px);
&:hover{
cursor: pointer;
}
}
}
I need to use left and top etc... to position it correctly. I've found all this much easier using background-image and background position, but that doesn't seem to be as accessible. Also we're trying to use sprites wherever possible. Is there a way to do what I want using background size, and background position. Clip seems unreliable to me for some reason, not too mention I can see the entire image block container when debugging in Chrome or Firefox. Anyone have any ideas here? I'm sure this is a fairly common problem.