Edit: Everybody getting here trying to find a solution for IE's flexbox behavior with overflow have a look at this stackoverflow thread. Seems this is not going to be fixed. I was able to work around the issue, see answer below, but there might be cases (responsive height) where you can't.
I've got a problem with IE11 (surprise) that I don't know how to fix.
A child that overflows it's parent container should be centered horizontally and vertically when transitioned in size. I'm trying to do it with flexbox, but anything else that works would be fine as well.
When researching for IE flexbox alignment issues I just found a bug that applies when using min-height, the workarounds didn't help in this case.
Below is a simplified example of the problem. Watch in IE and you'll see the shape is starting it's animation from the top instead of the center. Every other browser will keep the shape centered.
Here's a fiddle to play around with: jsfiddle
Any idea would be appreciated :)
.container {
background-color: grey;
height: 150px;
width: 100%;
justify-content: center;
flex-direction: column;
display: flex;
overflow: hidden;
}
.child {
background-color: lightgrey;
height: 100%;
width: 100%;
flex: 1 0 auto;
align-self: center;
font-size: 5em;
animation: changesize 3s infinite;
}
svg {
width: 100%;
height: 100%;
}
.st0{fill:#00748A;}
.st1{fill:#D3D938;}
#keyframes changesize {
0% { width: 100%; height: 100%; }
50% { width: 500%; height: 500%; }
100% { width: 100%; height: 100%; }
}
<div class="container">
<div class="child">
<svg version="1.1" id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 3000"><circle class="st0" cx="1500" cy="1500" r="1401.2"/><circle class="st1" cx="1500" cy="1500" r="45.2"/>
</svg>
</div>
</div>
Because .container has a fixed height we can use absolute positioning to center .child.
.container {
background-color: grey;
height: 150px;
width: 100%;
position: relative;
overflow: hidden;
}
.child {
background-color: lightgrey;
height: 100%;
width: 100%;
left: -200%;
right: -200%;
top: -200%;
bottom: -200%;
margin: auto;
position: absolute;
font-size: 5em;
animation: changesize 3s infinite;
}
svg {
width: 100%;
height: 100%;
}
.st0 {
fill: #00748A;
}
.st1 {
fill: #D3D938;
}
#keyframes changesize {
0% {
width: 100%;
height: 100%;
}
50% {
width: 500%;
height: 500%;
}
100% {
width: 100%;
height: 100%;
}
}
<div class="container">
<div class="child">
<svg version="1.1" id="test" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 3000 3000"><circle class="st0" cx="1500" cy="1500" r="1401.2"/><circle class="st1" cx="1500" cy="1500" r="45.2"/>
</svg>
</div>
</div>
Related
I'm trying to get a navbar with variable heights, say 200px left of center, 100px right of center, connected by a div in the middle that has an svg clip-path from one height to the other. The height is also supposed to be animated by scroll.
Currently this is achieved using flexbox with three children. Since it's apparently not possible to give only one part of a clip path a stroke with, I'm overlaying another div of the same size with the same clip path, shifted 10px to the top. So the background of the underlying div is supposed to give the illusion of a 10px wide bottom margin. And it does.
However, the other borders of the overlayed div don't always align correctly with both the div underneath and the neighbouring divs, so depending on the width of the center div / the screen size, the center div's background color (that is used to emulate the bottom-border) is showing a tiny border to the left, right, and top of the div.
I assume this is because of the inevitable rounding of the svg path. So I'm at a loss now, and wondering if what I'm trying to achieve can actually be done in css?
Here's a codepen of my current effort.
https://codepen.io/ts-mz/pen/ZEjrqWK
HTML -
<div class="container">
<div class="navbar">
<div class="navbar-child left"></div>
<div class="navbar-child center">
<svg width="0" height="0">
<clipPath id="svgClip" clipPathUnits="objectBoundingBox">
<path d="m0,0 h1 V0.5 H0.641 c-0.142,0,-0.203,0.5,-0.36,0.5 H0 V0"></path>
</clipPath>
</svg>
<div class="ontop"></div>
</div>
<div class="navbar-child right"></div>
</div>
<div class="content0">
<h2>Curvy</h2>
<p>Lorem ipsum dolor ...</p>
</div>
<div class="content1">
<h2>very curvy!</h2>
<p>Lorem ipsum dolor ...</p>
</div>
</div>
CSS -
.container {
position: relative;
}
.navbar {
width: 100%;
height: 400px;
position: fixed;
display: flex;
transition: all 1s ease;
}
.navbar.scrolled {
height: 200px;
}
.navbar-child {
flex-grow: auto;
flex-basis: calc(100% - 768px);
}
.left {
border-bottom: 10px solid red;
background: white;
}
.center {
border: none;
flex-basis: 768px;
flex-grow: 0;
flex-shrink: 0;
position: relative;
display: block;
margin: 0 auto;
background: red;
clip-path: url(#svgClip);
}
.ontop {
z-index: 10;
content: "";
position: absolute;
top: -10px;
left: 0;
width: 100%;
height: 100%;
background: white;
clip-path: url(#svgClip);
}
.right {
border-bottom: 10px solid red;
background: white;
height: 190px;
transition: all 1s ease;
}
.navbar.scrolled .right {
height: 90px;
}
svg {
width: 0;
height: 0;
}
.content0 {
position: relative;
width: 960px;
margin: 0 auto;
height: 100vh;
background: #abcdef;
text-align: left;
z-index: -1;
}
.content1 {
position: relative;
width: 960px;
margin: 0 auto;
height: 100vh;
background: #fedcba;
text-align: right;
z-index: -1;
}
JS-
let scrollPosition = window.scrollY;
const navBar = document.getElementsByClassName("navbar")[0];
window.addEventListener("scroll", function () {
scrollPosition = window.scrollY;
if (scrollPosition >= 260) {
navBar.classList.add("scrolled");
} else {
navBar.classList.remove("scrolled");
}
});
Thanks for any idea incl. completely different approaches!
Here is how my header is represented
If I click on the cross
The image quality of the logo is really very low
I would just like to know if it is possible to increase the size of the logo and delete the title of the logo.
Is it possible to do this?
dashboard.component.html
<div class="sidebar" [class.sidebar-close]="!openSidebar">
<div class="logo-details">
<img src="https://zupimages.net/up/22/42/fxvl.png" />
</div>
...
styles.css
/* Sidebar */
.sidebar {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 260px;
background: white;
z-index: 100;
transition: all 0.5s ease;
}
.sidebar.sidebar-close {
width: 60px;
}
.sidebar .logo-details {
width: 100%;
padding: 10px 10px 10px 10px;
}
.sidebar .logo-details img {
height: 50px;
width: 80%;
display: block;
margin: 0 auto;
}
...
I can send you an illustration via Stackblitz here
Thank you very much for your help.
Here's roughly what you need to do. The image must have a wrapper, the property of which is not to show cropped parts of the image. You can position the image itself inside the wrapper in any way convenient for you.
.wrapper {
overflow: hidden;
box-shadow: 0 0 40px black;
width: 180px;
height: 120px;
}
.wrapper img {
transform: scale(1.2) translateX(-65px);
}
<div class="wrapper">
<img src="https://zupimages.net/up/22/42/fxvl.png">
</div>
i need some help with a css slide loop,
Its working but the slide is not smooth, there is a jittering and there is a jump at the end the loop.
I kept changing the keyframe but i just cant find a way to make is smooth without jittering
So here's the code :
thats the container :
.container {
max-width: 1140px;
position: relative;
width: 100%;
margin: auto;
text-align : center ;
overflow : hidden;
}
// here the column where the images slides
.col-lg-3 {
animation: slide 15s linear infinite;
margin: 20px 5px ;
}
#keyframes slide {
0% {transform: translate(0)}
100% { transform: translateX(calc(-250px * 5))}
}
Pretty sure that there must be a better solution. But you need to ask better question i think.
I still don't know what do you need, but check this maybe it will help.
I create a box full of images and give that box a margin-left (comes from justify content: end inside parent container(main-container)) and cover it with another box (cover-container) which have a position:absolute on it. and have a higher z-index than main-container and same background-color with main-container.
In animation i gave
100% {
transform: translateX(-600%);
}
-600% because i have 5 images and when i give 5 width it acts like it is jumping as you said in your question but when giving 600% (5 + 1) it acts better like continious loop.
img{
display: block;
max-width: 100%;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body{
min-height: 100vh;
overflow: hidden;
position: relative;
margin:0;
}
.container {
max-width: 1200px;
display: grid;
place-content: center;
margin: 0 auto;
background-color: bisque;
height: 100vh;
}
.main-container{
display: flex;
overflow : hidden;
justify-content: end;
}
.cover-container {
position: absolute;
display: grid;
place-content: center;
height: 400px;
width: 900px;
z-index: 999;
margin-left: 300px;
background-color: bisque;
overflow: hidden;
}
.image-container{
position: relative;
display: flex;
width: 75%;
height: 400px;
}
img{
animation: slide 7.5s linear infinite;
}
#keyframes slide {
0% {
transform: translate(0);
}
100% {
transform: translateX(-600%);
}
}
<div class="container">
<div class="main-container">
<div class="cover-container"></div>
<div class="image-container">
<img src="https://source.unsplash.com/random/300x400" alt="" />
<img src="https://source.unsplash.com/random/300x400" alt="" />
<img src="https://source.unsplash.com/random/300x400" alt="" />
<img src="https://source.unsplash.com/random/300x400" alt="" />
<img src="https://source.unsplash.com/random/300x400" alt="" />
</div>
</div>
</div>
I am currently working on a project that has div with a background image sliding in using a transform: translate. This div has a z-index of zero while some other sibling elements have a higher z-index to ensure they are placed on top. This seems to work fine in my landscape version. However, as this use case only has a landscape version, I am also implementing a transform: rotate when in portrait mode to ensure landscape viewing. When viewing in portrait, the background image slides in above everything, then relocates to the back. Not breaking, but sloppy, as this should be rotated anyways. However, after deployment, I was informed that there have been two instances of the image never relocating to its 0 Z-index home and breaking the usage. I have looked at https://katydecorah.com/code/z-index-and-transform/ and z-index is canceled by setting transform(rotate) and am still not sure how to approach this.
The issue only seems to occur in Safari while applying the rotate.
Rough outline of HTML elements:
<div id="root">
<div class="App ">
<div class="mainView">
<div class="navBar"></div>
<div class="mainContent">
<div class="arrowWrapper">
<div class="arrow slideInItem"></div>
</div>
<div class="alphaView">
</div>
<div class="footerBar"></div>
</div>
</div>
</div>
Some of the relevant CSS:
.App {
text-align: center;
height: 100%;
width:100%;
}
.mainView{
height: 100%;
width: 100%;
background-color: #fff;
overflow:hidden;
position: relative;
transform-style: preserve-3d;
}
.navBar{
height: 79px;
width: 100%;
display:flex;
flex-direction: row;
align-items: center;
background-color: #fff;
}
.mainContent{
display:flex;
flex-direction:column;
justify-content:flex-end;
margin-top: 18px;
height:85.25%
}
.arrow{
position: absolute;
z-index: 0;
top: 0;
width: 100%;
height: 100%;
background-size: contain;
background-image: url("../images/Page_background_Arrow.png");
background-repeat: no-repeat;
}
.arrowWrapper{
transform-style: preserve-3d;
position: absolute;
z-index: 0;
top: 97px;
width: 100%;
height: 86%;
}
.alphaView{
display: flex;
height: 100%;
width: 100%;
overflow:hidden;
position: relative;
z-index: 10;
justify-content: space-around;
}
.footerBar{
z-index: 999;
position:fixed;
top:auto;
display:flex;
bottom:0;
height: 6.15%;
width:100%;
flex-direction:row;
align-items:center
}
/* portrait lock */
#media only screen and (min-width: 100px) and (orientation:
portrait) {
#root {
transform: rotate(-90deg);
transform-origin: left top;
height: 100vw;
width: 100vh;
overflow: hidden;
position: absolute;
top: 100%;
left: 0;
}
}
Thank you
Try setting a -1 index to the background image.
This is a very good article for z-index too What the heck, z-index??
I have a div on my index.php with an iframe containing all my other php-pages.
What I wanted was to scale the div horizontally and vertcal and still keep the content proportional in center.
It's easy with an img, but I could'nt figure it out with a div or an iframe.
I don't know if this has been solved in here before, and if so, I have'nt been able to find it, and I have struggled with it for a long time now.
Then suddenly I found a workable solution on:
https://codepen.io/thebabydino/pen/MajxzY?editors=110
So what I want with this post, is just to share it with others, who have the same problem.
#master
{
position: absolute;
margin: 0% auto;
padding: 0 auto;
left: 0%;
top: 0%;
width: 100%;
height: 100%;
text-align: center;
overflow: hidden;
background: #000000;
}
.slide
{
position: absolute;
padding: 0 auto;
left: 0%;
top: 0%;
left: calc(50vw - 89vh);
width: 177.7777777777vh;
height: 100%;
overflow: hidden;
background: #000000;
}
#media (max-aspect-ratio: 16 / 9)
{
.slide
{
left: 0%;
top: calc(50vh - 37.5vw);
width: 100vw;
height: 100vh;
}
}
<body>
<div id="master">
<div id="iframe_site" class='slide'>
<iframe id="iframe_master" src="http://www.mrles.dk/test_2.php" name="iframe_master" frameborder="0" width="100%" height="100%" scrolling="no"></iframe>
</div>
</div>
</body>