I have an IFrame on a webpage when I use IOS Safari I have a bug where it doesn't let me scroll down. I've done a lot of research around this and see its a common bug, but I can't seem to get my version working. The most descriptive solution is
How to get an IFrame to be responsive in iOS Safari?.
Although I can't get that method working for me. Heres what I have so far:
index.html
html,
body {
padding: 0;
margin: 0;
border: 0;
}
iframe {
position: fixed;
width: 100%;
height: 100vh;
top: 0;
border: 0;
z-index: 9999;
/* overflow: auto; */
}
#scroll-wrapper {
-webkit-overflow-scrolling: touch!important;
overflow-y: scroll;
width: 100%;
height: 150vh;
z-index: 9999;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
</head>
<body>
<!-- <div id="scroll-wrapper"> -->
<iframe src="iframe.html" allowtransparency="true"></iframe>
<!-- </div> -->
</body>
</html>
iframe.html
html,
body {
padding: 0;
margin: 0;
border: 0;
width: 1px;
min-width: 100%;
*width: 100%;
}
div {
display: block;
margin: 0 auto;
max-width: 300px;
width: 100%;
height: 1000px;
border: 3px solid grey;
text-align: center;
line-height: 150px;
margin-bottom: 50px;
margin-top: 50px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
</head>
<body>
<div>Context1</div>
</body>
</html>
Uncomment <div id="scroll-wrapper"> and add this style for iframe wrapper:
#scroll-wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
}
See David's post about this trick
2022 and still a problem on ios. the solution i found is a hack, and it suits me much better than the wrapper around the iframe. for this hack to work we need an element in the iframe and and onload function attached to the iframe in the parent window:
in the iframe, put it anywhere you'll like:
<span id="eIphoneHack"></span>
in the parent, add an onload event to the iframe:
$("#eInnerWnd").on("load",function(e){
$("#eIphoneHack",document.getElementById("eInnerWnd").contentWindow.document).css("display","none").css("display","initial");
}
and hopefully it will work for you as it did for me.
Related
I have a problem where once the screen starts getting to a certain width, the video starts to grow past the height and width of the browser, and horizontal and vertical scroll bars appear. I've been struggling for hours trying to figure out how to fix it. Is there a way to keep the video full width and height on larger screens without overflowing?
You might not be able to answer this if you aren't on a screen big enough (although if you are good with dev tools, you can mimic a larger screen).
Here is a link to the full screen codesandbox, and here's a link to the codesandbox editor code.
I'll also include my code here, but it won't be much of use with Stacks built in editor and browser.
body {
height: 100vh;
width: 100vw;
margin: 0;
}
nav {
background: black;
height: 4em;
}
.player-group {
position: relative;
width: 100%;
padding-bottom: 56.25%;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
<html>
<body>
<nav></nav>
<div class="player-group">
<video>
<source
src="http://media.xiph.org/mango/tears_of_steel_1080p.webm"
type="video/webm"
/>
</video>
</div>
</body>
</html>
Remove nav tag.
Remove .player-group -> padding-bottom and add height property
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>
<style>
body {
height: 100vh;
width: 100vw;
margin: 0;
}
nav {
background: black;
height: 4em;
}
.player-group {
position: relative;
width: 100%;
height: 100%;
}
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
</style>
</head>
<body>
<div class="player-group">
<video>
<source
src="http://media.xiph.org/mango/tears_of_steel_1080p.webm"
type="video/webm"
/>
</video>
</div>
</body>
</html>
This might do the trick:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
}
nav {
background: purple;
height: 4em;
}
.player-group {
padding: 0px;
margin: 0 auto 10px auto;
background-color: greenyellow;
}
video {
display: block;
object-fit: contain;
max-width: 100vw;
max-height: 85vh; /* value depends on nav height */
margin: 0 auto;
}
</style>
</head>
<body>
<nav></nav>
<div class="player-group">
<video controls name="media">
<source
src="http://media.xiph.org/mango/tears_of_steel_1080p.webm"
type="video/webm"
/>
</video>
</div>
</body>
</html>
I have a fixed banner at the bottom of my website. Here is the styling for it
#mobile-cookie-policy {
position: fixed;
bottom: 0;
width: 100%;
height: 70px;
text-align: center;
background-color: #f7f7f7;
border-top: 1px solid #ddd;
z-index: 1;
padding-bottom: 10px;
}
#mobile-cookie-policy p {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: block;
}
#mobile-cookie-policy span {
cursor: pointer;
padding: 10px 20px;
display: block;
}
And the element itself
<div id="mobile-cookie-policy">
<span onclick="hideDiv('mobile-cookie-policy')" id="mobile-cookie-close">✕</span>
<p>By using our website you are <br>agreeing to our use of cookies</p>
</div>
For some reason, on Firefox Android the fixed banner doesn't work it and jumps all over the place. Its default position is also slightly out of view. I can't work out why.
Here is a demonstration: https://imgur.com/a/FVsjt5k
EDIT: Curiously, I have discovered that it works on Firefox when the toolbar is set to be on the bottom, but not when it's on the top.
EDIT2: I have tried removing every other element on the page one by one, but it didn't help in any case.
EDIT3: I have also discovered that disabling "scroll to hide toolbar" makes it function as intended.
EDIT4: I am having the same issue with this simple website
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<meta charset="utf-8">
<title></title>
<style>
#main {
height: 3000px;
}
#fixed {
background-color: red;
bottom: 0;
position: fixed;
width: 100%;
height: 70px;
}
</style>
</head>
<body>
<div id="main">
</div>
<div id="fixed">
</div>
</body>
</html>
body {
margin: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="content"></div>
</body>
</html>
```
positon: fixed does not cling to the top when applied.
I don't think there are any elements, so I think I should stick up completely, why not?
https://jsfiddle.net/9gqcxLn0/
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
you should use top:0
I don't see an issue other than you never told it where it was supposed to fix to. You likely wanted a top: 0 in the style, but it should remain fixed from where it was located without it, I believe.
html, body {
margin: 0;
padding: 0;
}
.content {
background: red;
height: 100px;
width: 50px;
position: fixed;
top: 0;
}
main {
height: 200vh;
}
<main>
abcdefghijk
<div class="content"></div>
12345678901234567890
</main>
Is there a way to remove that small vertical scroll on the mobile view of webpages without using overflow?
I know the normal way is to just add: overflow-x: hidden; but, I also have an element with sticky positioning position: sticky; which doesn't work anymore when overflow is applied to the parent elements. So is there a way i can get the same effect but without using overflow?
html,body{
overflow-x: hidden; /* ADDIND THIS SOLVES THE VERTICAL SCROLL ISSUE BUT BREAKS THE STICKY DIV BELOW */
}
div.header-fixed {
position: -webkit-sticky; /* Apple */
position: sticky;
width: 100%;
background-color: #202020;
padding: 5px;
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="read comments in css">
<title>scroll</title>
</head>
<body>
<div class="header-fixed" id="fixed-header">
</div>
<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</body>
You can hide the vertical scrollbar with the ::-webkit-scrollbar pseudo-element, but it not works in firefox browser:
body{
overflow-y: scroll;
scrollbar-width: none; /* Firefox ? */
-ms-overflow-style: none; /* IE, Edge */
}
body::-webkit-scrollbar {
display: none; /* Chrome, Opera, Safari */
}
div.header-fixed {
position: -webkit-sticky;
/* Apple */
position: sticky;
width: 100%;
background-color: #202020;
padding: 5px;
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="CSCB20 Course Website">
<title>scroll</title>
</head>
<body>
<div class="header-fixed" id="fixed-header">
</div>
<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>a
</body>
An other option is to use containers, the child container's width is more than the parent container's, so the scrollbar will be hidden:
.parent {
position: relative;
width: 100%;
height: 75vh;
overflow: hidden;
}
.child {
width: 105%;
height: 100%;
overflow-y: scroll;
}
div.header-fixed {
position: -webkit-sticky;
/* Apple */
position: sticky;
background-color: #202020;
padding: 5px;
top: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="CSCB20 Course Website">
<title>scroll</title>
</head>
<body>
<div class="header-fixed" id="fixed-header">
</div>
<div class="parent">
<div class="child"> <br>a<br>a<br>b<br>a<br>a<br>a<br>a<br>a<br>a<br>b<br>a<br>a<br>a<br>a<br>a<br>a<br>a<br>b<br>a<br>a
<br>a<br>a<br>a<br>a<br>a<br>b<br>a<br>a<br>a<br>b<br>a<br>a<br>a<br>a<br>b<br>a<br>a<br>a<br>a<br>a
</div>
</div>
</body>
I've browsed a whole lot of posts on here, some of which relate more closely to my issue than others; yet I've still to find a solution/explanation. -- Sorry if I've missed the answer somewhere!
Here goes.
I have this issue on with regards to a hero image on a site I'm creating, that I'd love to see resolved before I venture any further.
My issue is, that currently, on zoom, it goes towards the upper left corner, and adds a horizontal scrollbar at the bottom.
Ideally I'd like for the hero image to be centered when I zoom in with the browser, and for there to be no horizontal scrollbar.
Hopefully there's a simple fix, or something obvious I'm missing, and you lot could provide my feeble mind with an explanation as to what exactly it is that I'm not getting.
Below is provided the HTML and CSS I have so far. - Thanks in advance!
* {
margin: 0;
padding: 0;
font-size: 10px;
}
.hero_Image {
height: 1080px;
width: 1920px;
background-image: url("https://i.imgur.com/NVdZ3Ja.jpg");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-bottom: 1px solid lightgray;
margin: 0 auto;
position: relative;
box-sizing: border-box
}
.preview {
height: 50rem;
width: 1920px;
margin-left: 10%;
background: green;
margin: 0 auto;
}
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>treadwell.io</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="hero_Image">
</section>
<section class="preview">
</section>
</body>
</html>
to fix your problem add this css to your file and your problem is that you let the width of sections overflowing
.hero_Image {
height: 500px;
width: 500px;
background-image: url(https://images.homedepot-static.com/productImages/6c9e2ae9-7592-4de9-8ca9-2692bb908be7/svn/commercial-electric-specialty-meters-ms602h-64_1000.jpg);
background-repeat: no-repeat;
background-position: center;
background-size:cover;
border-bottom: 1px solid lightgray;
position: relative;
box-sizing: border-box;
overflow: hidden;
margin: 0 auto;
}
.preview {
height: 500px;
width: 500px;
margin-left: 10%;
background: green;
margin: 0 auto;
overflow:hidden;
}
<!doctype html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>treadwell.io</title>
<link rel="stylesheet" href="style.css">
</head>
<style>
</style>
<body>
<section class="hero_Image">
</section>
<section class="preview">
</section>
</body>
</html>