I noticed something strange when trying to move an absolute positioned element with transform property even when using something like translateY(0) it moves the element abit which it should not move it at all
is this a normal behavior ?? and is there any workaround for it ??
I could not find anything on the internet related to this topic so I'm posting this here
NOTE: this issue happend on (Firefox) and it seems to work just fine on (Chrome)
I tried to reproduce the same problem using the code below
<div class="wrapper">
<div class="box box-1"></div>
<div class="box box-2"></div>
</div>
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
display: grid;
place-content: center;
}
.wrapper {
position: relative;
width: 200px;
height: 400px;
border: 1px solid red;
}
.box {
position: absolute;
width: 100%;
border: 5px solid white;
/*
if you toggle the next line you'll notice the bottom border line disappear and appear again
*/
transform: translateY(0);
}
.box-1 {
background-color: red;
height: 25%;
}
.box-2 {
background-color: blue;
height: 75%;
top: 25%;
}
you'll notice a line that has a comment above
as described removing the transform line will make the bottom border to reappear again
Related
I was wondering how I could make a div that I have fixed to the bottom right of my screen become unfixed once the page reaches the footer.
For example if my html is:
<div class="main" />
<div class="fixed" />
<div class="footer" />
And my css is:
.main {
height: 100vh;
background-color: aqua;
width: 100vw;
}
.fixed {
background-color: green;
height: 200px;
position: fixed;
bottom: 0px;
width: 200px;
}
.footer {
background-color: brown;
height: 300px;
width: 100vw;
}
I would like to have my fixed div in the bottom until the footer starts to be revealed and then have it scroll on top of the footer. Should I use sticky positioning? If so how do I do that? If not is there a better solution?
Thanks.
You can use position: sticky along with bottom: 0 to stick it to the bottom of the viewport (to answer your question of how). Since it's non-sticky location is right before the footer, it will rest naturally when the viewport reaches there.
body {
font-weight: bold;
font-size: 24px;
padding-bottom: 300px;
}
main * {
padding: 10px;
background-color: #ccc;
border: 1px solid #000;
}
.content {
min-height: 1000px;
}
.sticky {
position: sticky;
/* the important part - stick to the bottom */
bottom: 0;
border: 1px solid red;
background-color: white;
}
<main>
<div class="content">content</div>
<div class="sticky">I'm sticky</div>
<footer>footer</footer>
</main>
That being said, as mentioned in the comment by Will - should you use it? That depends on what browsers you support. If you need to support older browsers, you'll need a fallback and/or JavaScript to handle the positioning.
It's probably a webkit bug (discussed here) and I'm trying to find a workaround for that.
The problem is that fixed div cuts by it's parent (which is smaller) at least in Safari on iOS 12.3.1
Example on jsbin
.container {
border: 1px solid gray;
width: 150px;
height: 150px;
overflow: scroll;
/* This should create a new stacking context, but not a containing block.
Safari does create a containing block for these instead :/
*/
opacity: 0.99;
/* same for these other properties:
position: fixed;
mix-blend-mode: multiply;
filter: blur(0px); */
}
.fixed {
position: fixed;
padding: 20px;
top: 40px;
left: 40px;
width: 150px;
background-color: orange;
}
<div class="container">
<div class="fixed">
I should not get clipped!
</div>
</div>
I am using this layout for responsive div that maintains aspect ratio. It works well, but it requires overflow: hidden, to be clear it's padding-top: 56.25% defined in :after. If there is no overflow on wrapper, next element (in this case href link) is blocked.
My question is: is there a way to achieve same result without overflow: hidden on wrapper? I need some element to be visible outside wrapper without being cutting off.
Open snippet in full page if you can't see the issue within a small window.
#wrapper {
position: relative;
max-width: 1000px;
min-width: 350px;
max-height: 383px;
border: 1px solid;
/*overflow:hidden;*/
}
#wrapper:after {
padding-top: 56.25%;
display: block;
content: '';
background: rgba(0,0,0,.25);
}
<div id="wrapper"></div>
click me
You can add a inner div and make it responsive with a pseudo element like you did before, and apply overflow: hidden; on it. Then add another sibling div and set the style you wish to apply, it would be div #test in the example, as you see it will be visible outside the wrapper.
#wrapper {
position: relative;
max-width: 1000px;
border: 1px solid;
}
#inner {
min-width: 350px;
max-height: 383px;
overflow: hidden;
}
#inner:after {
background: rgba(0,0,0,.25);
padding-top: 56.25%;
display: block;
content: '';
}
#test {
position: absolute;
right: 0;
bottom: 0;
transform: translateY(100%);
width: 100px;
height: 50px;
background: aqua;
}
<div id="wrapper">
<div id="inner"></div>
<div id="test"></div>
</div>
click me
Recently I have come across a problem for which I am not finding any appropriate solution.
Below is the image which gives an idea of what i am trying to achieve:
The div shown by the arrow is the mark of the problem which i am finding a solution for.
The problem is I want the div to be extended to full screen.
This div is inside a parent div who has a fixed width due to which i am not able to extend my image to full screen.
Have tried giving overflow to parent but isn't working.
I have tried below solution which is working to a certain extent but need a reliable solution.
width: 100%;
left: 0;
position: absolute;
margin-left: calc(-31.5vw);
align-content: center;
Could someone please provide some solution to this?
html, body
{width: 100%; height: 100%; overflow: hidden;}
#parent{
display: block;
background-color: yellow;
border: 1px solid red;
position: fixed;
width: 200px;
height:100%;
}
#child1{
background-color: red;
display: block;
border: 1px solid yellow;
position: absolute;
width: 100vw;
margin-left: calc(200px - 100%);
//top:0px
}
<div id="parent">parent with position: fixed
<div id="child1">child wrapper (uncomment top to fit the parent wrapper)</div>
</div>
use Viewport Sizes so it will cover the whole page (vw and vh)
#first {
width: 100px;
height: 100px;
background:gray;
position: fixed;
top: 0;
left: 0;
}
#second{
width: 100vw;
height: 100vh;
background:blue;
position:absolute;
}
<div id="first">
<div id="second">
something
</div>
</div>
The below code snippet should work, if I understand your question correctly. Setting the width of the child div to 100vw makes the div 100% of the width of the viewport (window).
Also note that in order to get the child to start at the left of the viewport and not the left of the parent, I gave the child a position of absolute and a left of 0. Because the parent is not positioned, it starts the left of the child at the left of the viewport (the closest positioned ancestor).
#parentDiv {
width: 250px;
height: 250px;
margin: 0 auto;
background-color: orange;
border: 2px solid red;
}
#childDiv {
/* 100vw is 100% of the viewport width. */
width: 100vw;
height: 50px;
background-color: lightblue;
box-sizing: border-box;
border: 2px solid green;
position: absolute;
left: 0;
}
p {
text-align: center;
}
<html>
<body>
<div id="parentDiv">
<p>Parent</p>
<div id="childDiv"><p>Child</p></div>
</div>
</body>
</html>
I am currently transitioning the width property of an element. I would like to replace this with transitions on scaleX and translateX for better rendering performance.
I'm struggling to come up with a proper 1:1 conversion between the two concepts.
Below is a box which contains two lines. Each line has a bar inside of it. The first bar is created using width. The second bar is created using scaleX and translateX. The second bar breaks out of the box. It should appear identical to the width bar for all possible values.
Is this an appropriate way to tackle this problem? If not, how should I approach it? If so, I have some concerns:
I feel like I shouldn't have to use 1% width. I thought I could say 1px and scale that, but maybe that isn't the right idea.
I'm unclear if I should use 1% width and scale up, or 100% width and scale down. Perhaps they're equivalent, but the width of the bar controls the positioning of translateX
* {
box-sizing: border-box;
}
.box {
height: 200px;
width: 200px;
border: 1px solid;
}
.line {
background-color: #ccc;
width: 100%;
height: 5px;
margin: 50px 0;
}
.bar {
height: 5px;
background-color: blue;
}
.bar.width {
width: 66.6%;
}
.bar.scale {
width: 1%;
transform: scaleX(66.6) translateX(33%);
}
<div class='box'>
<div class='line'>
<div class='bar width'>
</div>
</div>
<div class='line'>
<div class='bar scale'>
</div>
</div>
</div>
It's simpler than all that. You're already scaling the element to 66%. Now all you need to do is set the origin to the far left of the element with transform-origin: 0 50%; and drop the translate rule. That should fix the issue.
* {
box-sizing: border-box;
}
.box {
height: 200px;
width: 200px;
border: 1px solid;
}
.line {
background-color: #ccc;
width: 100%;
height: 5px;
margin: 50px 0;
}
.bar {
height: 5px;
background-color: blue;
}
.bar.width {
width: 66.6%;
}
.bar.scale {
width: 1%;
transform: scaleX(66.6);
transform-origin: 0 50%;
}
<div class='box'>
<div class='line'>
<div class='bar width'>
</div>
</div>
<div class='line'>
<div class='bar scale'>
</div>
</div>
</div>