Since iOS 14, contents in a div with an 'overflow-y: scroll' property don't seem to work on Safari, does anyone have a solution? (maybe it's just my code that doesn't work, too.)
I don't know why it does it now, i don't have debug tools on my phone (sadness...) But it was working under iOS 13.6.
I put an example underneath.
<html lang="fr">
<style>
html{
background-color: var(--background);
z-index: -9999;
}
body{
position: relative;
width: 100%;
top: 0;
left: 0;
right: 0;
margin: 0;
z-index: -9999;
}
.head{
position: relative;
display: block;
top: 0;
left: 0;
right: 0;
height: 10vh;
background-color: blue;
border-radius: 8px;
}
.emb-content{
margin-top: 2vh;
margin-bottom: 2vh;
width: 96%;
display: block;
margin-left: 2%;
margin-right: 2%;
border-radius: 10px;
height: 74.5vh;
overflow-y: scroll;
border: none;
z-index: 9999;
-webkit-appearance: none;
-webkit-box-shadow: 0px 2px 10px -1px rgba(0,0,0,0.45);
-moz-box-shadow: 0px 2px 10px -1px rgba(0,0,0,0.45);
box-shadow: 0px 2px 10px -1px rgba(0,0,0,0.45);
}
.footer{
display: block;
position: relative;
height: 10vh;
bottom: 0;
left: 0;
right: 0;
background-color: yellow;
}
</style>
<body>
<div class='head'></div>
<div class='emb-content'>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>add
</div>
<div class='footer'></div>
</body>
</html>
remove z-index: -9999;, z-index < 0 is not supported in ios 14
Related
I made a curved tab list and everything looks good, but the problem is in some resolutions it break position about one pixel, I really want know why this happen technically? and how can I avoid this?
#tabs ul li {
display: inline-block;
padding: 0 10px 0 10px;
border: 1px solid gray;
border-bottom: none;
border-radius: 10px 10px 0 0;
height: 40px;
position: relative;
line-height: 40px;
top: 5px;
margin: 0 -5px 0 0;
min-width: 100px;
}
.active {
border: 1px solid #0061ff !important;
height: 50px !important;
line-height: 50px !important;
border-bottom: none !important;
top: 0px !important;
}
#tabcontent {
width: 200px;
height: 200px;
}
#tab {
border: 1px solid #0061ff;
margin-top: 75px;
border-radius: 10px;
}
#tabs {
margin-top: -68px;
}
.invRadTab1 {
width: 35px;
height: 10px;
background: white;
position: absolute;
bottom: -3px;
left: -33px;
z-index: 9999999;
overflow: hidden;
}
.invRadTab2 {
width: 35px;
height: 10px;
background: white;
position: absolute;
bottom: -3px;
right: -33px;
z-index: 9999999;
overflow: hidden;
}
.invRadTab1 span {
width: 60px;
height: 20px;
background: #fff;
position: absolute;
bottom: 2px;
right: 2px;
border: 1px solid #0061ff;
border-radius: 0 0 10px 0;
border-top: none;
border-left: none;
position: absolute;
}
.invRadTab2 span {
width: 60px;
height: 20px;
background: #fff;
position: absolute;
bottom: 2px;
left: 2px;
border: 1px solid #0061ff;
border-radius: 0 10px 0 10px;
border-top: none;
border-right: none;
position: absolute;
}
li.active::after {
content: "";
display: block;
width: 100%;
height: 2px;
background: white;
position: absolute;
bottom: -2px;
left: 0;
}
<div id="tab">
<div id="tabs">
<ul>
<li><a>Tab 2</a></li>
<li class="active"><a>Tab 1</a><span class="invRadTab1"><span></span></span><span class="invRadTab2"><span></span></span>
</li>
<li><a>Tab 3</a></li>
<li><a>Tab 4</a></li>
</ul>
</div>
<div id="tabcontent">
some content
</div>
</div>
If you want to see this problem, you should run this snippet in full page and zoom in or zoom out (for me on 125% and 90%), my screen is 1920 and another machine is 1366, I don't see any problem in 1920 resolution, but see this break in 1366 resolution also in another screens. how can I fix this issue?
I've looked at some other threads, but nothing seems to work. I'm trying to center a lightbox of an unknown width in the center of the page (horizontally). Any help would be appreciated. The code is as follows.
HTML
<div class="backdrop"></div>
<div class="box">
<div class="close">x</div>
<img src="../pics/placeholder.png">
</div>
CSS
.backdrop {
position: absolute;
text-align: center;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: .0;
filter:alpha(opacity=0);
z-index: 50;
display: none;
}
.box {
position: absolute;
top: 20%;
width: auto;
height: auto;
background: #ffffff;
z-index: 51;
padding: 2px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 5px #444444;
-webkit-box-shadow: 0px 0px 5px #444444;
box-shadow: 0px 0px 5px #444444;
display: none;
}
.close {
position: absolute;
padding-left: 5px;
padding-top: 5px;
margin-left: 98%
margin-top: 4px;
cursor: pointer;
font-family: sans-serif;
}
• To center an element horizontally with position: relative use:
.element {
position: relative;
display: inline-block;
margin: 0 auto; /* We don't care about 0, but we do care about auto. */
}
• To center an element horizontally with position: absolute or position: fixed use:
.element {
position: fixed; /* Lightboxes usually use position: fixed. */
left: 50%;
transform: translateX(-50%);
}
How can I do a folded-corner with external shadow which continues to the parent div shadow, like that :
Thanks.
CSS Backgrounds and Borders Module Level 4 introduces the corner-shape property:
By default, non-zero border-radii define a quarter-ellipse that rounds
the affected corners. However in some cases, other corner shapes are
desired. The corner-shape property specifies a reinterpretation
of the radii to define other corner shapes.
In your case, you should set it to bevel:
Border radii define a diagonal slice at the corner.
The code would be something like
corner-shape: bevel;
border-radius: 0 0 30px;
box-shadow: 0 0 5px #000;
However, this spec is a draft not ready for implementation. So browsers haven't implemented it. But you can use corner-shape preview to see how it would look like.
tried this one, a bit complex, but it works
.box {
width: 200px;
height: 100px;
position: relative;
padding: 25px;
background: none;
}
.box .content {
position: relative;
z-index: 2;
}
.box .the_background {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.box .the_background .square-top-right {
width: 250px;
height: 125px;
position: absolute;
top: 0;
left: 0;
background: #fff;
display: block;
z-index: 3;
}
.box .the_background .square-bottom-left {
width: 225px;
height: 150px;
position: absolute;
bottom: 0;
left: 0;
background: #fff;
display: block;
z-index: 3;
}
.box .the_background:after {
content: '';
width: 35px;
height: 35px;
background: #ddd;
position: absolute;
z-index: 2;
right: 7px;
bottom: 7px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-box-shadow: 0px 0px 10px #000;
-moz-box-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.box .the_background .square-shadow {
position: absolute;
left: 0;
top: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.box .the_background .square-shadow:before {
content: '';
position: absolute;
left: 0;
width: 250px;
height: 125px;
-webkit-shadow: 0px 0px 10px #000;
-moz-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
.box .the_background .square-shadow:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 225px;
height: 25px;
-webkit-shadow: 0px 0px 10px #000;
-moz-shadow: 0px 0px 10px #000;
box-shadow: 0px 0px 10px #000;
}
<div class="box">
<div class="content">
Lorem ipsum...
</div>
<div class="the_background">
<div class="square-top-right"></div>
<div class="square-bottom-left"></div>
<div class="square-shadow"></div>
</div>
</div>
I'm trying to center this popup but I can't seem to get it to work properly on smaller screens like iphone. It looks okay on desktop/laptop screens. Can anyone suggest any ideas how to use media queries to get it the popup to be centered properly regardless of screen size? thanks.
<style type="text/css">
#popup {
display: none;
background: #FFF;
border: 5px solid #444;
padding: 0 15px 15px 15px;
position: fixed;
top: 20%;
left:35%;
width: 25%;
min-width: 210px;
z-index: 100000;
box-shadow: 0 0 10px #000;
border-radius: 5px;
text-align: center;
}
#popup-overlay {
display: none;
background: #000;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
</style>
The easiest way to do this is to use a transform to centre the element. This will work no matter the width / height of the element
html, body {
height: 100%;
margin: 0;
}
#popup {
/*display: none;*/
background: #FFF;
border: 5px solid #444;
padding: 15px;
position: fixed;
width: 25%;
min-width: 210px;
z-index: 100000;
box-shadow: 0 0 10px #000;
border-radius: 5px;
text-align: center;
top: 50%;
left:50%;
transform: translate(-50%, -50%)
}
#popup-overlay {
/*display: none;*/
background: #000;
opacity: 0.5;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
}
<div id="popup-overlay"></div>
<div id="popup">Look at me!</div>
Can you try this,
#popup {
display: none;
background: #FFF;
border: 5px solid #444;
padding: 0 15px 15px 15px;
position: fixed;
top: 20%;
left: 50%;
width: 25%;
margin-left: -25%;
min-width: 210px;
z-index: 100000;
box-shadow: 0 0 10px #000;
border-radius: 5px;
text-align: center;
box-sizing: border-box;
}
Note:
It is better to add some jsfiddle like url instead of providing partial details make easy to understand and workout.
left:50%;
margin-left:-120px;
(210 / 2) + 15 = 120
I would move the object to the center and then to the right the half of its size.
As the object width is not fixed, use transform to do that:
#popup {
...
left:50%;
transform: translate(-50%);
...
}
Despite transform is not available in IE8 and below, may be a good solution.
http://jsfiddle.net/fvLtd068/
For html5 enabled browsers use:
#popup {
background: #FFF;
border: 5px solid #444;
padding: 0 15px 15px 15px;
position: fixed;
/* top: 20%; */ //Remove
/* left: 35%; */ //Remove
/* width: 25%; */ //Remove
left: 50%; // Insert
top: 50%; // Insert
transform: translate3d(-50%, -50%, 0); // Insert
min-width: 210px;
z-index: 100000;
box-shadow: 0 0 10px #000;
border-radius: 5px;
text-align: center;
}
I have an issue where the height of the "content body" div (below) is exceeding the bottom of the page (and behind the page footer). I want this div to scroll when there is long content, which it does now, but it doesn't scroll to the bottom of the div as it is beyond the page. I'm not sure what is causing the issue? Here is an example: http://jsfiddle.net/Gg6qY/
CSS:
html, body {
height:100%;
width: 100%;
overflow: hidden;
margin: 0;
}
header {
position: fixed;
width: 100%;
background: #006f3b;
color: #fff;
top: 0;
height: 60px;
padding: 10px;
}
#content {
position: relative;
height: 100%;
width: 100%;
padding: 60px 0 20px 0;
/* Header height and footer height */
margin: 0 auto;
/* Center content */
}
#sidebar {
position: absolute;
background: #191919;
color: #fff;
left: 0;
top: 60px;
bottom: 0;
width: 220px;
padding: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-o-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
#contentHeader {
position: relative;
left: 220px;
z-index: 100;
padding: 10px;
background: #fff;
border-bottom: 1px solid #191919;
-webkit-box-shadow: 3px 3px 3px #888888;
-ms-box-shadow: 3px 3px 3px #888888;
box-shadow: 3px 3px 3px #888888;
}
#contentBody {
position: relative;
background: #fff;
height: 100%;
margin-left: 220px;
padding: 0 10px;
overflow-y: scroll;
}
footer {
position: fixed;
width: 100%;
background: #999;
color: #000;
bottom: 0;
height: 20px;
text-align: center;
}
HTML:
<body>
<header>The header</header>
<div id="content">
<div id="sidebar">The Sidebar</div>
<div id="contentHeader">The Content Header</div>
<div id="contentBody">
<p>The Content Body</p>
</div>
</div>
<footer>The Footer</footer>
Thanks!
body and #content, goes beyond the window size as height:100% means height of the content area of the body which if you add to top and bottom padding, goes beyond the window. use
box-sizing:border-box to fix this.
contentBody to expand to maximum available height, make it absolute and set top and bottom.
contentBody should also work ideally with height 100%. Have not checked that.
updated fiddle:
http://jsfiddle.net/GaYf4/1/
Not sure what your intended goal is, but I think this is what you are looking for.
html{
min-height: 100%;
}
html, body {
width: 100%;
overflow: hidden;
margin: 0;
}
body
{
height: 100%;
}
if you know exactly where you want the top and bottom of all elements to be (which is seems like you do), its usually easiest to use 'top', 'bottom', 'left', and 'right' rather than 'width' and 'height', as padding adds to the width and height and will cause nasty overflows.. anyways this works on my machine..
html, body {
height:100%;
margin: 0px;
}
header {
position: absolute;
left: 0px;
right: 0px;
background: #006f3b;
color: #fff;
top: 0px;
height: 60px;
padding: 10px;
}
#content {
position: absolute;
top: 60px;
left: 0px;
bottom: 0px;
width: 100%;
}
#sidebar {
position: absolute;
background: #191919;
color: #fff;
left: 0px;
top: 0px;
bottom: 0px;
width: 200px;
padding: 10px;
}
#contentHeader {
position: absolute;
top: 0px;
left: 220px;
height: 15px;
padding: 10px;
z-index: 2;
background: #fff;
right: 0px;
border-bottom: 1px solid #191919;
-webkit-box-shadow: 3px 3px 3px #888888;
-ms-box-shadow: 3px 3px 3px #888888;
box-shadow: 3px 3px 3px #888888;
}
#contentBody {
position: absolute;
padding: 10px;
background: #fff;
left: 220px;
top: 38px;
bottom: 20px;
right: 0px;
overflow: auto;
}
footer {
position: fixed;
left: 0px;
width: 100%;
background: #999;
color: #000;
bottom: 0;
height: 20px;
text-align: center;
}