I'm currently having a problem with a page I'm working on. I have a nice grid with different content blocks on them.
When I click on a block I open a modal, and the grid zooms out. I'm adding this class to my grid to zoom-out:
#container.overlay-open {
transform: translate3d(0,0,-1500px);
}
The css of the container itself:
#container {
.transition(0.7s all);
transform-style: preserve-3d;
position: absolute;
left: 0px;
right: 0px;
top: 100px;
bottom: 100px;
}
This works perfectly for the first row. However when I scroll down a bit and click on an other block the grid-container keeps zooming out, but the container is moved a bit to the top of the screen, it's not centered anymore (picture 3).
How can I keep the content centered after zooming (picture 2)?
Instead of using "translate3d", you could use "scale". I believe that should achieve your desired effect.
#container.overlay-open {
transform: scale(0.5);
}
Related
I have a solution to printing that works well in Chrome but I am getting odd results in IE11. The solution involves scaling down the content of the web page to fit onto the printed page.
In IE I am seeing my content cut off about halfway down the page.
I have created a simplified example of what I believe is the cause of my issue, which is that the scaled content only seems to take up that percent of the page. E.g. if I scale the content by 50% (0.5), it only takes up half of the page space when I print it. If scaled by 75% it takes up about three quarters of the page space. Example below.
HTML structure
<body>
<div class="content">
... content goes here ...
</div>
</body>
CSS
.content {
transform: scale(0.5);
transform-origin: left top;
}
Here is a hosted version you can see in action, with borders for debugging: https://neisha.github.io/ieprintingissue/
Image of the behaviour in IE
I have tried all sorts of different permutations of css to get it to work but I am at a loss. Also I'm not sure if this a bug in IE or expected behaviour. I can't imagine who would want this behaviour. Is there a css guru out there who can shine some light on this?
I'm still convinced it's an IE bug, but I've managed to partially crack this using a specific hierarchy of elements and some restrictions.
I can get it to render correctly in the print/print preview, but only if the content fits on a single page.
This requires having the scaled element absolutely positioned within an absolutely positioned container element, and behaves differently depending on whether the container is relative to an element in it's ancestry (in the flow of the DOM), or whether the container elements is completely outside of the flow of the DOM.
I will explain each of these restrictions using the example below:
HTML structure
<body>
<div class="relativeAncestor">
<div class="container">
<div class="content">
... content goes here ...
</div>
</div>
</div>
</body>
Cannot allow content to go over multiple pages
The absolutely positioned container and it's ancestors must also not be allowed to go over multiple pages. i.e. they cannot be more than the view height.
Example CSS to enforce restriction 1
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
The absolutely positioned parent is outside the flow of the DOM so that it doesn't have ancestors
Example CSS to enforce restrictions 1 and 2
// html, body and .relativeAncestor will have position: static by default
.container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
overflow: hidden;
}
.content {
position: absolute;
transform: scale(0.5);
transform-origin: left top;
}
If it is within the flow of the DOM (has a relative ancestor), it must start from the top of the page with no gap
This means:
no margin top
if a border if present, box-sizing needs to be set to border-box
padding is ok
Example CSS to enforce restrictions 1 and 3
html, body {
width: 100%;
height: 100%;
}
body {
margin-top: 0;
}
.relativeAncestor {
position: relative;
width: 100%;
height: 100%;
}
.container {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
overflow: hidden;
}
.content {
position: absolute;
transform: scale(0.5);
transform-origin: left top;
}
In cases 2 and 3, margin on the absolutely positioned container is ok.
This works for part of my use case where I am scaling the viewport onto a single page. When I have to scale and have it go over multiple pages I am still in trouble.
Here is a hosted version of the partial workaround you can see in action: https://neisha.github.io/ieprintingissue/workaround.html
Image of the expected behaviour
I don't have an in-depth answer for why this magical combination makes it render correctly, but hopefully this will help someone. Please comment if you have any insight as to what is going on.
Design question here. How can I make the #main-wrapper slide over the #single-carousel on the following page: http://duijnisveld.wpengine.com/
Right now it moves up when scrolling, I need the carousel to stay put and make the main wrapper slide over it when scrolling down.
giving .header-foto-wrapper position: fixed and #main-wrapper position: relative gives unexpected behaviour for me, I'm clearly missing something important.
*note, in the url, the .header-foto-wrapper does not have the position fixed as it breaks the layout and it's a live site for the client to see.
Thanks!
You'll need to apply width. Things go a little wonky when a container calculates width once you pull it out of the content flow. A width:100% will fill the page width. You'll also want to move the content area down and apply a background color.
.header-foto-wrapper {
position: fixed;
width: 100%;
}
#main-wrapper {
position: relative;
top: 100%;
background: #fff;
}
By setting the position as absolute.
.wrapper {
position: absolute;
left: 100px;
top: 150px;
}
http://www.w3schools.com/cssref/pr_class_position.asp
I have the following example for an off-canvas menu: http://jsfiddle.net/pwghdvoh/
When you click the button in the top left of the blue header, it moves the main app view to reveal the hidden menu.
It does this using the following CSS:
.showSidebar .app
{
-webkit-transform: translateZ(-20px)
translateX(240px);
transform: translateZ(-20px)
translateX(240px);
}
However I'm finding that on various resolutions that the app is not moved 240px to the right and 20px offset from the the top and bottom... If you look at the screenshot, you can see that it's too close to the top and bottom of the screen, it should have 20px at the top and bottom.
Could this be caused by the perspective of the wrapper being incorrect?
I do this dynamically using jQuery:
$('.wrapper').css({
'perspective': $(window).width(),
'-webkit-perspective': $(window).width()
});
So it's always the perspective of the viewport width. But this doesn't seem to fix the issue.
Any ideas?
Instead of giving width: 100% and height: 100% to the .wrapper class, I added position absolute and stretched it to its parent container which is body element. and when the side bar is viewed, I gave the top and bottom properties as 20px which overrides the already provided 0px value.
.wrapper {
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
.wrapper.showSidebar {
top: 20px;
bottom: 20px;
}
Working Fiddle
The title says it all. I have an image with height: 100% inside each of a couple display: inline-block <li> elements. When their container is position: static. All is peachy. But when I change it to position: absolute/fixed, the <li> elements get width of the original image, not the scaled down width even though the image itself has correct dimensions.
This behaves as expected in Chrome, but breaks in Firefox.
Did anyone encounter this behaviour? More importantly, is it possible to fix it without JS?
Background: I am making a responsive position: fixed gallery that fits the screen with image thumbnails covering bottom 20% of the viewport.
Isolated Demo (click the button to toggle position: static/fixed ):
http://jsfiddle.net/TomasReichmann/c93Xk/
Whole gallery
http://jsfiddle.net/TomasReichmann/c93Xk/2/
I finally got it working. It seems that when you declare something with
Position:fixed, left: 0; top: 0; right: 0; bottom: 0;
Only chrome recognizes that as "explicitly defined dimensions". Once I added height: 100%; Other browsers caught up. Fortunately the height 100% didn't break the layout even when the content underneath overflowed viewport.
http://jsfiddle.net/c93Xk/3/
It still breaks uniformily across all browsers when you try to resize the window. I guess, I'll have to calculate the widths by hand with JS
DEMO
Check the demo, is that what you are looking for?
I have added these 2 lines of css to make it work like that:
/* Keep Position fixed at bottom */
#gallery:not(.toggle) { width: 100%; bottom: 0; top: auto; height: 20%; background: transparent; }
#gallery:not(.toggle) .gallery-thumbs{ height: 100%; }
Heyo, I'm using a 2000px width image as a background for a 960px width webpage. I am trying to make it so it doesn't show a horizontal scrollbar when a part of the image is to the right of what's visible, but what I'm trying to do is not working for me.
Two IDs are involved. One is 'bg' which has the background image as its background and is positioned where I want it, while the other is 'bg_holder' which contains only 'bg' and which I tried to use to neatly cover the visible web page area and hide its overflow so the part of the background image that is jutting out wouldn't cause a scrollbar. But this does not appear work, as a scrollbar is created when there is a part of the image to the right of the visible web page (but not when it's to the left).
Is there anything wrong with this CSS snippet? Could something outside of this snippet be the source of the problem? Is there another approach I can take?
#bg_holder {
position: absolute;
overflow: hidden;
min-width: 960px;
top: 0px;
left: 0px;
right: 0px;
height: 100%;
}
#bg {
background: url(../img/bg.jpg);
position: absolute;
height: 1050px;
width: 2000px;
margin-left: -1366px;
left: 50%;
z-index: -1;
}
To answer your question, by positioning #bg absolutely, you take it out of the document flow / out of it's parent element, so the overflow:hidden has no effect.
As an additional comment, you can position the background image exactly where you want (x, y) when you put it directly in #bg_holder, there doesn't seem to be any need to put the background in a separate div. As far as I can tell at least, but I haven't seen the rest of your code and don't know what you want to achieve exactly.