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?
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.
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>
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>
I am developing a widget which could be embedded into the page as an iframe (iframe will be injected and styled via javascript). Iframe should be placed in bottom right corner. I can only control the style of an iframe.
I have created following demo page which demonstrates the problem in test host page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello world!</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p id="greeting" style="width:1000px">Loading...</p>
<iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe>
</body>
</html>
On desktop browser this code works fine, but on (some) mobile devices the iframe is not visible on the screen. If I try to highlight an element its placed on gray area.
Why is happening this and how can I style an iframe so that will be placed on bottom right corner?
Edit: this is a screenshot from Galaxy S3 emulation (Chrome). Iframe is invisible in gray area. I think its the same on physical Nexus 5X device.
Many thanks!
1000px width had been given to #greeting , that's why the element out of your mobile width ,you can simply fix this like using media Queries. 992 width starting the portrait view of devices
#media (max-width:992px){
#greeting { width:100% !important; }
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello world!</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p id="greeting" style="width:1000px">Loading...</p>
<iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe>
</body>
</html>
Based from my investigation, the gray area that shows up in the chrome emulator is caused by the style of the paragraph html tag:
`<p id="greeting" style="width:1000px">Loading...</p>`
I believe the gray area shows up because you have a style of width:1000px in where the total size of the emulator, Galaxy S3 for example, only have a maximum width of 360px. But if you remove the width: 1000px style in the paragraph element, you can see that the frame is being properly shown in the bottom right corner of the screen.
You can check it with the sample below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello world!</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p id="greeting" style="width: 100px">Loading...</p>
<iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px; height: 200px; background: transparent; border: 0px none; overflow: hidden; z-index: 1000000;right: 5%;"></iframe>
</body>
</html>
I didn't try this, but what if -- instead of setting the position as `bottom: 5%; right: 5% -- you calculate the position from the top left based on viewport width and viewport height. Something like:
top: calc(100vh - 200px);
left: calc(100vw - 200px);
See THIS DEMO IN YOUR MOBILE
Change:-
add following style to handle mobile browser
Reason:-
The mobile renders the html in mobile compatible mode which injects its own style to the higher width elements. thats why the page works in an unintended way in mobile compatible mode. if you handle it in your html itself, then it leaves the style of your page how you intended to view.
Thats why if you click Request desktop site in chrome setting your code itself works fine
/* mobile phone */
#media all and (max-width: 768px) {
#greeting {
width:100% !important;
}
}
<html>
<head>
<meta charset="UTF-8"/>
<title>Hello world!</title>
<meta name="viewport" content="width=device-width"/>
<style>
/* mobile phone */
#media all and (max-width: 768px) {
#greeting {
width:100% !important;
}
}
</style>
</head>
<body>
<p id="greeting" style="width:1000px">Loading...</p>
<iframe src="http://www.w3schools.com" style="position: fixed; bottom: 5%; width: 200px;
height: 200px; background: tranparent; border: 0px none; overflow: hidden; z-index: 1000000;right:
5%;"></iframe>
</body>
</html>
Here's an example of this happening:
<html>
<head>
<style>
#menu {
background-color: blue;
position: absolute;
height: 300px;
left: 0px;
width: 200px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>Testing</title>
</head>
<body>
<div id="menu" class="max-width"></div>
</body>
<script>
var menu = document.getElementById("menu");
menu.addEventListener("click", function() {
menu.style.left = "200px";
});
</script>
</html>
If you click the menu div in mobile Safari (which should just move the div right 200px) it seems to cause the entire viewport to shrink. This doesn't seem to happen in other mobile browsers. You can test it here: http://natecollings.com/mobile-safari.html
Does anyone have a mobile Safari workaround for this?
Here's a gif of it happening:
Have you tried to force a min-width to be equal to the actual width and min-height to be equal to the actual height and try it out on safari on mobile? This might push the browser to use that height and width.
Something like:
#menu {
background-color: blue;
position: absolute;
float: left;
min-height: 300px;
left: 0px;
min-width: 200px;
}