I am trying to center svgs on top of each other. I am using the same method to position the divs and the svgs inside each other, but this is only working in chrome.
Following code is used to center:
position: absolute;
left: 50%;
top: 50%;
height: 100%;
width: 100%;
transform: translate(-50%, -50%);
This is how it looks like in Firefox:
The code can be found here.
Does anybody have a clue?
EDIT: I have found out what is happening: Firefox is applying the transform to the svg itself and thus moving the svg out of the viewbox. Have not found a solution yet.
Thanks!
I have now found the answer:
Firefox cascaded the translation onto the "use" tag and thus the position of the svg on the viewbox got translated. To counteract this i added the css rule:
use{
transform: translate(50% 50%)
}
Feel free to add any insight as to why this is happening.
Related
I have an SVG inside a div that I am trying to center by using absolute positioning. On IE11 the SVG is off-center though. When I remove the absolute positioning it appears that the starting point of the SVG is different on IE11 and Chrome. On IE11 the SVG is a few pixels further down the page then on Chrome.
I tried using a Flexbox solution instead of absolute positioning, but the same issue persists. Even when using align-items: center and justify-content: center, the IE11 version was a few pixels lower than the Chrome version.
This leads me to believe it is really not a positioning issue at all, but rather there is some fundamental difference between SVG display or positioning on IE11. I am using a VM to debug on IE11 but it is extremely laggy and pain-staking to develop on.
Is there some fundamental difference between display/positioning of SVG's on IE11? Can someone shed some light on this strange behavior?
jsFiddle
Also, here is a screenshot of the same code running locally on both Chrome and IE11 side by side:
EDIT:
It also appears like the SVG is off when I inspect it in IE dev tools:
Try to add preserveAspectRatio="xMidYMin meet" in your svg elenent (see https://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute for more info) and remove width and height attributes (see https://stackoverflow.com/a/9792254/895007).
Try the following:
position: absolute;
left: 0;
top: 50%;
transform: translate(0,-50%);
height: $desiredHeightInPixels;
width: 100%;
I want to display some shapes with color adjusted dynamically. To this end, I prepared all shapes as images with transparency in areas inside the shape and white color outside. To change a color of a shape, I simply set the background-color property of an img element.
The problem is that I may sometimes see 1-pixel wide lines on the edges of the image. Such line on the top of the image is visible in Google Chrome for Android, while in the PC version this issue can be seen once the page is zoomed in. The problem doesn't occur in Firefox. Here's a sample code in JSFiddle (updated).
What's more, the issue doesn't occur if I remove the outer div element or its style (I added it, because I want the page to be centered both horizontally and vertically).
I'm looking for any solution: either some hack to fix my code or another way to achieve my goal of coloring shapes dynamically.
What I can see in your code is that line is overflowing outside. You can just add overflow:hidden to the div element.
see this fiddle
<div style="position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);overflow:hidden;">
<img src="http://s10.postimg.org/vipedk1qd/arrow_up.png" style="background-color: red;" />
</div>
This looks like a glitch in GPU-accelerated compositing. If you don't need the transform property in the CSS, removing it should solve the problem for you (at least it does for me in Chrome on OS X). In this case, you could (for example) use negative margins instead
<div style="position: absolute; left: 50%; top: 50%; margin: -25px 0 0 -27px">
<img src="http://s10.postimg.org/vipedk1qd/arrow_up.png" style="background-color: #000000;"/>
</div>
http://jsfiddle.net/Lyd6xs5u/2/
Finally, I managed to find a working solution:
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
This has to be added to the style of the main container, which has the transform property applied. overflow: hidden; is not needed.
See this JSFiddle.
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 am working on a CSS animated HTML block. I created a fully responsible grid, so these blocks have relative sizes. The block contains a big image to ensure to display the content on all screens correctly. The images in the blocks have 100% width to fit the content, and they also have CSS transitions and transforms.
I would like to center these images vertically, but using only pure CSS. I tried a lot of variations of display, position and vertical-align properties, but no one worked for me. I could easily achieve the proper animation with the background property, but I don't want to create a lot of css classes for all the images (not even with js or jquery).
So could you tell me how to solve this issue with pure CSS? I also created a jsfiddle to demonstrate the problem.
EDIT: I also would like to keep the ratio of the images inside the blocks.
I've created a codepen example of position centrally horizontally and vertically and if you resize it stays in the centre.
http://codepen.io/tom-maton/pen/oqsEJ
In the example I have
margin: auto;
position: absolute;
left:0;
right: 0;
top: 0;
bottom: 0;
This makes it h &v positioned centre if you just do
margin: auto 0;
position: absolute;
top: 0;
bottom: 0;
This will position just vertically
Hope this helps
I had a look around and found this link for you:
CSS Tricks - Absolute Center (Vertical & Horizontal) and Image
I hope this can be of some help to you
I have done it on your fiddle too:
Your Fiddle Link
I simply added margin-top: -100px;
EDIT
Sorry didn't realised it wasn't for a fixed size see this updated version:
Fiddle Updated
I used the following code:
position: absolute;
top: 50%;
left: 50%;
height: 100%;
width: 50%;
margin: -25% 0 0 -25%;
I found it here:
6 Methods For Vertical Centering With CSS
You need to define the height: 100%; as well.
demo
if you define the images with css then it could be as ratio as you wish by setting background-size: cover; but to the image it's not possible.
You can't do what you want both retaining the image ratio and your container DIV smaller than image size, you can even set the height:100% to fit image inside the DIV or set DIV to a bigger size (or use smaller image to fit in the DIV) and use line-height:100%
Here are demo for first solution:
Demo changing the ratio
And demo for second solution:
Demo not changing the ratio
(I also set the text-align:center to make sure it is centered even when you don't use width:100%)
Hope it helps you.
The most dynamic solution (in my opinion) is using translateY.
This will move the element from its current position:
see: CSS3 2D transforms
img {
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);
}
I have an absolute positioned popup (hover over "ice white" image to see popup) which has css left:50%. Now this should appear in the middle of page but doesn't. Any suggestions please? Thanks in advance.
You're also supposed to add margin-left with the negative of a half of visible width of the element. So, for example:
width: 400px;
padding: 10px;
border-width: 2px;
/* -(400 + 10 + 2)/2 = -206 */
margin-left: -206px;
left: 50%;
Note that margin: auto suggested by others won't work because you've positioned the element absolutely.
position: absolute;
left: 50%;
transform: translate(-50%,0)
Lol, no. The left side of the image appears at 50% of the page width. Hence; left: 50%.
In order to center your image, set margin: auto instead.
Your code is working correctly. The popup is being positioned with left of 50% ... of the TD tag it's nested inside.
Try either taking the popup out of the table, or setting it to 50% of the document width instead. (Your javascript is minified and unreadable to me, or I'd help further.)
u can try to change CSS Style like this
#displayDiv {
background-color: white;
font-weight: bold;
height: 460px;
left: 50%;
margin: auto auto auto -475px;/* change done here */
overflow: hidden;
position: absolute;
text-align: center;
top: 80px;
width: 950px;
z-index: 1;
}
Looks to me like there's a containing element somewhere in between the "Ice White" image and the body (specifically, Firebug reveals that it's the <a class="popup1" ... >) that is relatively positioned, so your 50% is relative to that rather than the whole page.
I know this seems a bit counterintuitive: Why should it be relative to a parent element if the poput uses absolute positioning? It's basically because relative positioning is relative to where the element is in the normal flow of the document, whereas absolute positioning yanks the element out of that flow. See sections 9.4.3 and 9.6 of the W3C's explanation of the visual formatting model for more info.
Check out a tutorial or two if this is giving you trouble. I like Learn CSS Positioning in Ten Steps and css-tricks.com's "Absolute Positioning Inside Relative Positioning" (to which I'd provide a link if not for the spam filter; first-time answerer here ;) ).
As for what to do about it, you might be able to move the popups out of the relatively positioned parent, as mblaze75 suggests, but it looks (and I'm guessing here) like that <a> is what's triggering your JavaScript event, so you probably can't do that. Instead, I'd try removing the relative positioning and using margins instead.
Also, bear in mind what Greg Agnew said: Even with that problem solved, you're still centering the left edge rather than the center of your popup. I think duri's answer will take care of that.