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>
Related
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
I'm not sure whether this is an implementation bug or I'm misunderstanding how box-shadow relates to overflow-x and overflow-y. I'm guessing it's not a bug because I can confirm this on Chrome, Firefox, and Safari.
box-shadow seems to be all-or-nothing when it comes to the overflow property. overflow: hidden works on box-shadows, overflow: visible works too... But
overflow-x: hidden;
overflow-y: visible;
... does not work. The browser simply hides both the x and y-axes. Expected behavior, in my opinion, would be that the box-shadow on the x-axis is hidden while the box-shadow on the y-axis is visible.
Here's what I mean, as well as a CodePen:
body {padding: 0; margin: 0;}.container {background: dimgray;display: flex;align-items: center;justify-content: center;width: 100vw;height: 100vh;}
.orangeSquare {
background: orange;
width: 100px;
height: 100px;
display: flex;
align-items: center;
justify-content: center;
overflow-x: hidden;
overflow-y: visible; /* why doesn't this work? */
}
.tealRectangle {
background: teal;
color: white;
width: 92px;
height: 92px;
line-height: 92px;
text-align: center;
box-shadow: 0 0 85px 15px black;
}
<div class='container'>
<div class='orangeSquare'>
<span class='tealRectangle'>—</span>
</div>
</div>
Any ideas as to why this is happening? Or am I missing something obvious? A workaround would be appreciated as well. Thanks!
A simple workaround for a box shadow on a single side is to add a positioned pseudo-element with a gradient background which fades to transparent.
e.g. for a shadow below (add cross-browser gradient stuff)
.cropped-shadow {
position: relative;
z-index: 5;
background: #fc0;
height: 70px;
}
.cropped-shadow:after {
content:" ";
display: block;
position: absolute;
top: 100%;
width: 100%;
height: 10px;
background: linear-gradient(to bottom, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 100%);
}
<div class="cropped-shadow"></div>
Trying to solve a recent question, I found out what looks like a Chrome and IE bug.
When I set 2 divs, and the containing div has border-radius and overflow: hidden, the inner div is responding to hover on the area that shouldn't be
In this snippet, hover the grey area. The inner div will change color. This happens in IE and Chrome, but not in FF
.innerw, .innerw2 {
width: 240px;
height: 240px;
position: relative;
border-radius: 50%;
}
.innerw {
left: 0px;
top: 0px;
overflow: hidden;
}
.innerw2 {
left: 80px;
top: 0px;
background-color: palegreen;
}
.innerw2:hover {
background-color: green;
}
.inner2 {
left: 168px;
top: 13px;
width: 79px;
height: 229px;
background-color: grey;
z-index: -1;
position: absolute;
}
<div class="innerw">
<div class="innerw2">
</div>
</div>
<div class="inner2"></div>
I would like to know a way to avoid this bug.
I think this has to do with the relative positioning. If you drop the relative positioning on .innerw2, and use margin-left instead, this no longer occurs.
Let me share an example for better illustrating:
jsFiddle: http://jsfiddle.net/yhurak3e/
Or you can read it here:
HTML:
<div id="box1">box1</div>
<div id="box2">box2
<div>
<div id="box4">box4</div>
</div>
</div>
<div id="box3">box3</div>
CSS:
#box1 {
width: 100%;
height: 40px;
position: fixed;
top: 0;
left: 0;
background: green;
z-index: 5;
}
#box2 {
height: 300px;
position: relative;
background: yellow;
}
#box3 {
height: 100%;
width: 100%;
left: 0;
top: 0;
position: fixed;
background: black;
opacity: .8;
z-index: 10;
}
#box4 {
left: 20px;
top: 20px;
right: 20px;
bottom: 20px;
position: fixed;
background: blue;
z-index: 11;
}
In every other browser, the #box4 (the blue one) appears on the top of the other elements unless I give a z-index property to one of it's anchestors. This is the expected result.
In Android's default browser (tested on 4.1) the #box4 lies under the #box1 and #box3.
Does anybody know a CSS workaround to fix it?
Thx!
A workaround for a similar problem from this thread is to apply
-webkit-transform:translateZ(0);
to #box4.
You have to apply the above mentioned workaround on the parent element or elements of the #box4, along with applying the -webkit-transform:translateZ(0); to the #box4 like this:
#box1, #box2{ /*parent*/
-webkit-backface-visibility: hidden; /* Chrome, Safari, Opera */
backface-visibility: hidden;
}
#box4{ /*child*/
-webkit-transform:translateZ(0); /* Chrome, Safari, Opera */
transform:translateZ(0);
}
Working demo: http://jsfiddle.net/iorgu/yhurak3e/14/
I am having a problem with my CSS code. I want the div .top & .header equal to the width of the
body but it limits to the width of the container. I want it remain inside the container class.
Thanks,
body {
margin: 0;
padding: 0;
background: #000;
position: relative;
}
.container {
position: relative;
width: 910px;
height: 800px;
border: 1px solid #fff;
background: url(images/bg_home.jpg) no-repeat right;
margin: 0 auto;
z-index: 0;
}
.top {
background: #00112b;
width: 100%;
position: relative;
height: 49px;
z-index: 2;
opacity: 0.50;
filter: alpha(opacity=50);
}
.header {
position: relative;
left: 0;
opacity: 0.50;
filter: alpha(opacity=50);
background: #012e46;
width: 100%;
height: 99px;
z-index: 2;
}
.header .login {
background: red;
opacity: 100;
filter: alpha(opacity=100);
float: right;
}
.logo {
position: absolute;
top: 15px;
left: 0;
z-index: 3;
}
html
<body>
<div class="container">
<div class="top"> </div>
<div class="header">
<table class="login">
<tr>
<td>-- Schedule an appointment --</td>
</tr>
</table>
</div>
<div class="logo"><img src="images/logo.gif" width="204" height="120"/></div>
</div>
</body>
Your question also contains the answer.
I want the div .top & .header equal to the width of the body
This could be achieved by having an attribute / property of width: 100%;
but it limits to the width of the container
This is because the container is the parent of the child element. Which means the max width of the child element is the width of the parent.
I want it remain inside the container class.
Which means, you'll have to give the container the property of width: 100%.
You can also solve this by using the overflow property, but I assume that is not what you'd like.
http://www.w3schools.com/cssref/pr_pos_overflow.asp
Which ofcourse means:
.container {
position: relative;
width: 100%;
height: 800px;
border: 1px solid #fff;
background: url(images/bg_home.jpg) no-repeat right;
margin: 0 auto;
z-index: 0;
}
Also, not related to your question but to your CSS, you have a property of background which loads an image and not repeat.
Is this what you want or is it a pattern? In the last case, consider it making a small picture to repeat over the entire page, this reduces the load time of the webpage.
If the question was regarding your background not meeting the bodys width, consider adding it to the body tag instead of the container tag.
Although you have given .top and .header a width of 100% - they sit inside the container div which has a width of 910px. Therefore by saying .top width 100% you are basically saying .top width 910px because it is a child of container therefore it will take on those styles.
Why do the .top and .header need to sit inside the container? If you would them to be 100% i.e. fill the whole browser window, then you should take them outside the container div.
Good luck
Like this
please remove width:100%; for below selector:
css
.top {
background: #00112b;
position: relative;
height: 49px;
z-index: 2;
opacity: 0.50;
filter: alpha(opacity=50);
}
.header {
position: relative;
left: 0;
opacity: 0.50;
filter: alpha(opacity=50);
background: #012e46;
height: 99px;
z-index: 2;
}