I am building a modal popup window for mobile.
I noticed that when I try to scroll below the limit of the modal (see "B" part, on "A" part I reached the bottom),
The fixed section I have on the bottom becomes covered with gray, the more I try to force scroll.
It's happening both on Safari and Chrome, See this photo:
This is the order and CSS of the elements:
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.popup-r {
overflow-x: hidden;
width: 100%;
min-height: 100vh;
height: auto;
position: absolute;
z-index: 999;
top: 0px;
left: 0;
display: none;
padding-bottom: 100px;
}
.fix-section {
width: 100%;
z-index: 999;
position: fixed;
bottom: 0;
white-space: nowrap;
}
Related
I am trying to style the ion-refresher component background on one specific page, because it has a header. It works like expected in Safari, but on the device, it overlays everything on top.
I have tried some stuff with z-index (also with pseudo element) + positioning absolute, but I cannot get the ion-refresher to sit where it normally is. As soon as I add a background-color to the ion-refresher, it will overlay on top.
Any ideas on how to style the background of this element?
The CSS I used. Please note it only overlays everything when I add a background-color.
ion-refresher:global(.ios) {
height: 120px;
ion-refresher-content {
position: relative;
padding-top: 18px;
justify-content: start !important;
&::after {
content: '';
display: block;
width: 100%;
height: 120px;
position: absolute;
top: 0;
z-index: -9999;
background-color: purple;
}
}
:global(.refresher-pulling-icon) {
color: white;
}
ion-spinner {
color: white;
}
}
Any advice on how to debug this?
I have drawer animated mobile menu with scrollable navigation and fixed footer.
Since fixed element inside transformed element is impossible according to an old issue I applied absolute position to the footer and apply scroll to the navigation container.
The problem is that on IOS 12.1 footer randomly disappears.
HTML
<div class="menu">
<nav class="nav">...</nav>
<footer class="footer">Some footer</footer>
</div>
CSS
.menu {
position: fixed;
z-index: 1050;
top: 0;
left: 0;
overflow-x: hidden;
overflow-y: auto;
width: 100%;
min-height: 100%;
transition: transform .3s ease-out;
transform: translate(-100%, 0);
-webkit-overflow-scrolling: touch;
&.menu-open {
transform: translate(0, 0);
}
}
nav {
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 100%;
overflow: auto;
}
footer {
position: absolute;
bottom: 0;
width: 300px;
height: 65px;
}
UPD
I knew two working fixes:
1. change transform animation property to left, but thats less performant
2. set nav bottom to 65px to not overlap with footer but that's not answers why it's happening
Fiddle
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
tried with this code, still not working. It's fine on every other devices, it's fine in MAC as well, only the problem is on ios responsive devices.
You need to add overflow-scrolling to parent div. Check the below demo
.wrap {
width: 320px;
height: 500px;
position: relative;
right: 0;
bottom: 0;
left: 0;
top: 0;
-webkit-overflow-scrolling: touch !important;
overflow-y: auto !important;
border: 2px solid #ddd;
margin-bottom: 20px;
}
iframe {
width: 100%;
height: 100%;
border: none;
display: block;
position: absolute;
}
<div class="wrap">
<iframe class="iframe" src="https://theimpossiblecool.tumblr.com/"></iframe>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
i'm creating my first web site and it's going great, looks good, and works properly. The problem i have is that i just uploaded the files to the web hosting to see how is it looking across different devices, looks great on my Smart TV, on my Android phone, on the MacBook, BUT on the iPhone and the iPad everything looks bad.
The slider is no longer overflowing, the widht is not working, even the menu buton is gone and the nav is always showing, please i need some help with this, is there some code to add so this can work on IOs movile devices?
I been looking the internet for hours trying to find the solution, i found something that includes this code:
-webkit-appearance: none;
But nothing happens everything looks bad.Thanks in advance.
You are using CSS properties that need to be prefixed in order to work in -webkit browsers, even in newer versions, such as display:flex, justify-content, transition, flex-direction,...
The practical solution is to write normal (up to date) CSS and than run it through a tool that will add the necessary prefixes for making it compatible with most browsers. It's called auto-prefixing and you can read more about it here. Good auto-prefixing tools are connected to caniuse and can be configured for various specific needs (prefix for last three versions from each browser, or prefix for all browsers with an above X usage percentage, or combinations between the two).
Here are the auto-prefixed versions of your project's CSS files. Replace assets/css/header.css with:
*{
margin: 0;
padding: 0;
-webkit-appearance: none;
}
header{
z-index: 1000;
position: fixed;
width: 100%;
font-family: "roboto";
background-color: rgba(0, 0, 0, 0.7);
}
#btn-menu{
display: none;
}
header label{
display: none;
height: 30px;
width: 30px;
padding: 10px;
}
header label:hover{
cursor: pointer;
background-color: rgba(0, 0, 0, 0.8);
}
.menu ul{
margin: 0;
list-style: none;
padding: 0;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-webkit-justify-content: flex-end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.menu li:hover{
background-color: rgba(0, 0, 0, 0.8);
}
.menu li a{
display: block;
padding: 20px 20px 10px 20px;
color: #fff;
text-decoration: none;
}
#media (max-width: 768px) {
header label {
height: 60px;
width: 60px;
padding: 10px;
display: block;
}
.menu{
position: absolute;
background-color: rgba(0, 0, 0, 0.7);
width: 30%;
margin-left: -30%;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.menu ul{
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
}
#btn-menu:checked ~ .menu{
margin: 0;
}
}
And assets/css/body.css with:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-appearance: none;
}
body{
z-index: 500;
position: relative;
}
#logo{
padding-top: 50px;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
#logo-image{
width: 100%;
max-width: 650px;
}
#containerslider{
padding-top: 59px;
position: relative;
margin: auto;
width: 100%;
max-width: 1920px;
overflow: hidden;
}
.slider{
text-align: center;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
width: 400%;
}
.slider .section{
display: block;
height:100%;
width: 100%;
}
.slider img{
display: block;
height: 100%;
width: 100%;
}
.btn-prev, .btn-next{
width: 50px;
height: 50px;
color: white;
font-family: sans-serif; "roboto";
background: rgba(0, 0, 0, 0.5);
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
line-height: 50px;
font-size: 22px;
text-align: center;
border-radius: 50%;
cursor: pointer;
}
.btn-prev{
left: 10px;
}
.btn-next{
right: 10px;
}
.btn-prev:hover, .btn-next:hover{
background: rgba(0, 0, 0, 0.9);
}
.space{
height: 2000px;
}
I can't seem to get the header and footer to span across a mobile device such as iPhone, and the footer won't stick to the bottom. I've tried a meta code such as this:
My CSS mobile:
#charset "utf-8";
#logo {
left: 5%;
}
#navMenu {
position: relative;
left: 5%;
}
#content {
position: relative;
width: 95%;
height: 600px;
left: 2px;
right: 2px;
}
#footer {
position: fixed;
bottom: 0;
z-index: 5;
}
I've added this to the HTML meta:
meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0 maximum-scale=1.0,
Here is my desktop CSS incase something may override my mobile:
#header {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 45px;
z-index: 1;
box-shadow: 0px 0px 0px 1px rgba(82, 82, 82, 0.2);
background-color: rgba(234,234,234,1);
}
#navMenu {
position: absolute;
left: 55%;
top: 55px;
width: 325px;
height: 39px;
z-index: 3;
}
#logo {
position: absolute;
left: 20%;
top: 95px;
width: 300px;
height: 85px;
z-index: 1;
}
#pageLocation {
position: absolute;
right: 20%;
top: 240px;
width: 69px;
height: 25px;
z-index: 5;
color: rgba(50,153,204,0.1);
}
#content {
position: absolute;
right: 20%;
top: 270px;
height: 600px;
width: 60%;
padding: 10px;
margin-bottom: 50px;
z-index: 2;
border-bottom-color: rgba(50,153,204,0.2);
border-bottom-width: thin;
border-bottom-style: solid;
border-radius: 5px;
background-color: rgba(204,204,204,.1);
border-right-width: thin;
border-right-style: solid;
border-right-color: rgba(204,204,204,0.2);
border-left-width: thin;
border-left-style: solid;
border-left-color: rgba(50,153,204,0.2);
box-shadow: 0px .5px .5px .5px #333;
}
#footer {
position: absolute;
alignment: center;
bottom: 0;
left: 0;
width: 100%;
height: 50px;
z-index: 1;
text-align: center;
padding: 2px;
font-size: 12px;
line-height: 2px;
box-shadow: 0px 0px 3px 0px #333;
background-color: rgba(204,204,204,.7);
}
I've tried sticky footer techniques with no luck. I've gotten the footer with this method to stick to the bottom, but it just overlaps content when I scroll back up. Please help, this is very frustrating to get a simple iPhone/android capable footer that sits at the bottom of the page.