-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>
Related
I've recently come across this issue that
pseudo selector :active doesn't display the same on React and Static page.
this is what I apply
css code exactly the same
I don't even understand why this selector renders on mobile differently according to the framework and static.
button {
margin: 0;
padding: 0;
border: 0;
background-color: transparent;
-webkit-appearance: none;
text-transform: none;
outline: 0;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: pointer;
}
.form_button {
display: block;
position: relative;
padding: 8px 0 8px 58px;
border: 1px solid red;
border-radius: 8px;
margin-bottom: 18px;
width: 200px;
height: 100px;
text-align: left;
}
.form_button:active {
background-color: green;
}
please check out these both link below on Iphone chrome broswer. ( not Android)
React page - https://codesandbox.io/s/elated-smoke-o8m2xo?file=/src/index.css:0-476
Static page without framework - https://codesandbox.io/s/vigorous-dew-vssmej
Does anyone know about this issue?
or any solution for this?
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;
}
I wark on my Mobile project and I use jquery mobile library version 1.4.5.
I have this png image:
Here is the CSS:
.ui-icon-measure {
background-image: url(img/length_measure.png);
}
#measureControl {
position: absolute;
left: 10px;
top: 3em;
width: 40px;
z-index: 9999;
}
#measureButton .ui-icon {
width: 30px;
height: 30px;
top: 13px;
right: 13px;
background-color: transparent;
background-position: center;
}
Here is HTML code:
<div id="measureControl" data-role="controlgroup" data-type="vertical">
</div>
Here how it looks in the view:
But I want it to be like that:
Any idea what do I have to change in the code above to get desired view?
The code below will produce this:
.ui-icon-measure:after {
background: url(img/length_measure.png) no-repeat !important;
}
#measureControl a {
padding: 20px;
}
#measureControl {
position: absolute;
left: 10px;
top: 3em;
width: 40px;
z-index: 9999;
border-radius: 13px;
}
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.