I am running into an issue with ios mobile safari.
Fixed position footer is not retaining its position on opening/closing a new tab on iphone safari browser.
Sometimes the footer moves up and sometimes it moves down - it depends on whether the address bar is visible or not.
I am not able to understand why safari mobile is behaving like this.
<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
<style type="text/css">
html, body {
margin: 0;
padding: 0;
height:100%
}
.footer {
position: fixed;
bottom: 0px;
width: 100%;
height: 48px;
background-color: grey;
}
</style>
<body>
<div class="footer">
Bottom Fixed Footer.
</div>
</body>
</html>
Related
Scroll Snap is working in Safari but not in Chrome, also it is not working in Firefox. Whether touchpad or mouse is recognized in both browsers. What is wrong in my CSS?
body {
overflow-y: scroll;
scroll-snap-type: y mandatory;
margin: 0;
}
.section {
scroll-snap-align: center;
width: 100%;
height: 100vh;
}
.colorRed {
background-color: red;
}
.colorGreen {
background-color: green;
}
.colorBlue {
background-color: blue;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="section colorRed">1</div>
<div class="section colorBlue">1</div>
<div class="section colorGreen">1</div>
</body>
</html>
For Chrome/Firefox to support scroll snap to direct descendants of body, set scroll-snap-type on the html element rather than the body element. Safari is more tolerant.
html {
overflow-y: scroll;
scroll-snap-type: y mandatory;
margin: 0;
}
I can not found a spec or documentation on this issue, but it is covered in Practical CSS scroll snapping. At the time of writing, Chrome, Safari, and Firefox all support scroll-snap-type on the html element.
There are a lot of similar questions already asked. But I still couldn't figure out the problem.
When viewing the site on mobile there is this unwanted white space, desktop version does not have this problem.
Somehow, the unwanted white space is only present when width of website is greater than viewport(again, only on mobile).
The code is below.
*, *::after, *::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
border: 2px dashed rebeccapurple;
}
html,
body {
min-height: 100vh;
width: fit-content;
}
.myDiv {
height: 2000px;
width: 2000px;
border: 2px dashed tomato;
margin: 25px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div class="myDiv"></div>
</body>
</html>
Try set .div1 width to 1000px on style
I've run into an issue. I have a div absolute positioned and am hiding it off screen using a negative right value. This is fine on desktop browsers, but I'm finding on mobile safari that I can horizontally scroll and basically swipe the element into view.
I made a very simple version of what I'm attempting below:
<!doctype html>
<html class="no-js" lang="">
<!-- v3 -->
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Block Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.wrapper {
width: 100%;
height: 100vh;
position: relative;
overflow: hidden;
}
.disrupt {
width: 300px;
height: 300px;
background: #000;
position: absolute;
top:0;
right: -150px;
}
</style>
</head>
<body >
<div class="wrapper">
<div class="disrupt">
</div>
</div>
</body>
</html>
In a desktop browser it works fine, in Safari and Chrome on an iPhone I'm able to scroll the hidden portion of the disrupt block into view. Chrome on android seems to work fine. Any ideas?
hi i have a problem with my google form format in my site that need to work with a resolution of 1280x800 , i´m using chrome console to see the resolution but the form height is creating a scroll bar at the side and i want to fit it to my resolution is any solution or fix?? it need to fit the 1280x800 format .txs
html, body {
margin: 0;
padding: 0;
overflow: hidden;
}
html, body, .main, .main iframe {
margin: 0;
width: 100%;
height: 100%;
}
.main iframe {
border: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="main">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd4pzJ9kRydc-UVkEkm9xKDZjF0S3Earn-Wjcbh8FEAlYnkXA/viewform?embedded=true" frameborder="0" marginheight="0">Loading...</iframe>
</div>
</body>
</html>
So I can't change the size of my nav bar. I can't move it to the center either. Also I can scroll my page down and to the sides even though I set the body width and height to 100vw and 100vh. Can someone help?
My Code:
body {
background-color: black;
width: 100vw;
height: 100vh;
display: inline block;
}
h1 {
font-family: 'Anton', sans-serif;
color: white;
font-size: 108px;
text-align: center;
}
div {
width: 2000px;
height: 500px;
display: inline block;
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="KinoWorld homepage" content="html/css file">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Stuff</h1>
<div class="search">
<input type="text" placeholder="Search..">
</div>
</body>
</html>
Just because you set the body to a width of 100vw doesn't limit child elements to 100vw. You'll either want to set overflow-x: hidden on the body, or better yet, use appropriate styling on child elements.
For your div, try to avoid using pixel widths, but if you must, set a max-width: 100%; so they won't overflow their parent. You also have a typo display: inline block; needs to by hyphenated. Though you don't need to make this element an inline-block;, it's fine as a block level element.
Also, the body by default will be 100vw, you can set that as a max-width value which will aide if it's framed in (like with the snippets below), but usually it isn't necessary.
If you have a small page, and want it to be "full page no matter what", set it's min-height: 100vh, there's rarely a reason to limit it's total height to 100vh.
The simplest way to center an inline or inline-block element (your search input) is to set text-align: center; on the parent. Also note that semantically, you should use <input type="search"> for search form elements.
* { box-sizing: border-box; }
body {
background-color: black;
max-width: 100vw;
min-height: 100vh;
display: inline block;
margin: 0;
}
h1 {
font-family: 'Anton', sans-serif;
color: white;
font-size: 108px;
text-align: center;
}
div {
max-width: 100%;
width: 2000px;
height: 500px;
text-align: center;
}
<!doctype html>
<html class="no-js" lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="KinoWorld homepage" content="html/css file">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Anton" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Stuff</h1>
<div class="search">
<input type="search" placeholder="Search..">
</div>
</body>
</html>