When i load the screen on iOS scrolling in the X axis is not possible on iOS. No issues on android. When clicking a button which refreshes the data on the screen scrolling is possible again.
Anybody an idea what could cause this?
<div class="container">
<!-- CONTENT -->
<div class="scroll-container">
<!-- CONTENT-->
</div>
</div>
CSS
.container {
overflow-y: scroll;
width: 100%;
position: absolute;
overflow-x: scroll;
}
.scroll-container {
min-width: 100%;
overflow: scroll;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
display: inline-block;
padding-bottom: 50px;
}
According to the docs you can add a scrolling section in your content using ion-scroll:
ion-scroll
Scroll is a non-flexboxed scroll area that can scroll horizontally or
vertically. ion-scroll Can be used in places where you may not need a
full page scroller, but a highly customized one, such as image scubber
or comment scroller.
<ion-scroll scrollX="true" scrollY="true">
<!-- ... -->
</ion-scroll>
Demo source:
<ion-header>
<ion-navbar>
<ion-title>Scroll</ion-title>
</ion-navbar>
</ion-header>
<ion-content>
<ion-scroll scrollX="true" scrollY="true" style="width: 100%; height: 100%">
<div class="map-div"></div>
</ion-scroll>
</ion-content>
<style>
.map-div {
width: 2600px;
height: 1400px;
background: url('./assets/map.jpeg') no-repeat;
}
</style>
Related
I made a webpage with a sticky header that works fine on a desktop but not so well on mobile. For example, on an iPhone, if you turn your phone on to landscape mode, safari's tool bar will cover my sticky header. Similarly opening a link to my page on instagram will result in the same issue (instagram header will cover mine).
Heres's the HTML
<div id="container">
<div id="infotab-mobile">
<div id=rosemenu>
<div id="rose">
<img class="inforose" id= "roseimg" src="images/rose.png">
</div>
</div>
</div>
and the CSS:
#infotab-mobile{
display: initial;
justify-content: space-around;
flex-wrap: wrap;
width: 100%;
position: fixed;
z-index: 999;
}
#rosemenu{
position: fixed;
width: 100%;
height: 20%;
display: inline-block;
}
#rose{
position: relative;
width: 100%;
vertical-align: top;
text-align: center;
background: rgba(232, 232, 232, 0.96);
padding-top: 2%;
padding-bottom: 2%;
}
#roseimg{
margin: 0 auto;
text-align: center;
display: -webkit-box;
}
I've also noticed that using -webkit-overflow-scrolling: touch; disables an ios feature that allows you to scroll to the top of a web page by taping the safari tool bar. Has anyone discovered any work arounds?
I know there seems to be a lot out there about this, but none of the solutions seem to fix my issue.
I am trying to apply a fixed button to the bottom of my screen within an iframe. With my current implementation, I am experiencing a terrible flicker with the button on iOS Safari whenever I scroll.
Here's essentially what I have:
HTML
<iframe>
<body>
<div class="app">
<div class="app-content">
<div class="card">
<h1>Header</h1>
<p>Content</p>
</div>
<button class="fixed-button">This is flickering</button>
</div>
</div>
</body>
</iframe>
CSS
iframe {
border: none;
position: absolute;
height: 100%;
width: 100%;
top: 0; left: 0;
}
app {
-webkit-overflow-scrolling: touch;
overflow:auto;
position:absolute;
width:100%;
height:100%;
}
fixed-button {
position: fixed;
bottom: 1rem;
}
I've got a WIP on my site here http://jaredrauh.com/iframe-fixed-elements-ios/. Any suggestions would be amazing.
Take this markup, stick it in an html file, and view it in mobile Safari on an iPad. I'm using an iPad Mini 4 on iOS 9.3.2.
<html lang="en">
<head>
<title>long</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
<body style="background-color: #112FCB">
<div id="viewport" style="height: 928px; width: 768px; margin-top: 0px; display: block;">
<div style="width: 638.3376623376623px; height: 771.3246753246754px; transform: scale(1.203125, 1.203125); background-position-x: 0px;">
<div class="page-container" style="width: 100%; height: 100%; overflow-y: scroll; overflow-x: hidden; -webkit-overflow-scrolling: touch; position: relative;">
<div class="page-scroll" style="height: 10202px; width: 640px; left: 0px; top: 0px;">
<div style="position: absolute; left: 254px; top: 259px; width: 88px; height: 89px; display: block; background-color: rgb(255, 255, 255);">
<span style="top:-3px;left:0px;">1</span>
</div>
<div style="position: absolute; left: 252px; top: 1098px; width: 113px; height: 60px; display: block; overflow: visible; background-color: rgb(255, 255, 255);">`
<span style="top:-3px;left:0px;">2</span>
</div>
<div style="position: absolute; left: 229px; top: 1821px; width: 88px; height: 89px; display: block; overflow: visible; background-color: rgb(255, 255, 255);">
<span style="top:-3px;left:0px;">3</span>
</div>
<div style="position: absolute; left: 253px; top: 2503px; width: 88px; height: 89px; display: block; overflow: visible; background-color: rgb(255, 255, 255);">
<span style="top:-3px;left:0px;">4</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
So basically we have 4 absolutely positioned divs for showing where you are on the page, inside a very tall div (.page-scroll), which is inside a relatively positioned div with overflow-y: scroll and -webkit-overflow-scrolling: touch (.page-container). The other parent divs (page-viewport and viewport) are there to ensure a consistent look across devices.
On every other device we've tried, swiping to scroll scrolls the page-scroll div inside the page-container div as expected. However, on iPad, we are seeing non-deterministic behavior. If you swipe quickly, the page scrolls normally, but if you swipe slowly, the page will sometimes rubberband. It's as if the touchstart event is getting sent to one of the parent divs, and so the iPad thinks it is at the bottom or top of the page.
However! If -webkit-overflow-scrolling: touch is removed from the .page-container div, the problem disappears. But you lose momentum scrolling, which sucks. I should also note that if this markup is loaded onto a page via an iframe, the problem goes away, but that is not really an option for us (because reasons).
I have tried the suggestion in this similar question to put yet another div inside .page-scroll and set height: calc(100% + 1px), but that did not fix the bug.
I do see a lot of related questions that indicate -webkit-overflow-scrolling: touch has a myriad of problems, but none of those questions are quite exactly this bug, I think.
Has anyone encountered this before? Any suggestions for workarounds?
Page A has an iframe (that loads Page B). That Page B has a div#OutputDiv. My goal is to make that div in that iframe scrollable.
SOLUTION (CREDIT TO STEVE!):
Include overflow: auto for that div. However you must specify height too. Simply give any fixed value. eg height: 0.
Use a javascript function to make the div's height always same as the window's, even after window resize. height is now not fixed.
Code:
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
overflow: auto;
overflow-x: hidden; (optional)
-webkit-overflow-scrolling: touch; (enable smooth scrolling on mobile)
height: 0; (omit-able)
}
$(window).resize(function(){
$("#outputDiv").css("height",0).css("height",$(this).height());
});
$(window).trigger("resize");
TL;DR Full story
Page A.html - has an iframe to load Page B. When on Page A, that div#OutputDiv in that iframe must be scrollable. Works fine on PC but not scrollable on iPad/Android. Page structure:
Page B.php - Left half div#OutputDiv, right half div#map-canvas containing Google Maps.
(Sidenote: I think the #map-canvas CSS is pretty unchangeable, for example changing something may cause the Maps to extend height beyond browser height, which is not what I want.)
Page A.html
<style type="text/css">
#title-banner {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
#real-time-alert {
margin-top: 155px;
margin-left: 10px;
}
.tab-content {
border-left: 1px solid #ddd;
padding: 10px;
height: 100%;
}
#map {
height: 100%;
}
.nav-tabs {
margin-bottom: 0;
}
#panel {
position: fixed;
top: 120px;
right: 10px;
bottom: 10px;
left: 350px;
}
iframe {
width: 100%;
height: 100%;
}
</style>
<body>
<div id="title-banner" class="well"><h1>Real-time incident updates</h1></div>
<div id="real-time-alert">
DEMO:<br>
<a id="demolink" style="cursor: pointer; font-weight: bold;">22/11/2013, 0.32.18AM: 3.128268, 101.650656<br></a>
</div>
<div id="panel">
<ul class="nav nav-tabs" id="myTab">
<li class="active"><a data-toggle="tab" href="#map">Map</a></li>
<li><a data-toggle="tab" href="#message">Messages</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="map"><iframe seamless name="map-report"></iframe></div>
<div class="tab-pane" id="message"></div>
</div>
</div>
</body>
Page B.php
*for div#map-canvas, I had to do the code below, or else when I hover on the page, div#OutputDiv will disappear. This may be not important.
$("*").hover(function(){
$("#map-canvas").css("position","fixed"); });
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
height: 100%;
width: 50%;
}
#content-pane {
float:left;
width:48%;
padding-left: 2%;
}
#outputDiv {
font-size: 12px;
font-family: Arial;
margin-right: 1em;
}
</style>
<body>
<div id="content-pane">
<div class='well well-small' id="inputs" style="margin: 1em 1em 0 0">
<b>TESTING ONLY</b> <br>
<label for="originLat">Incident Site: </label><input type="text" id="originLat" style="width:6em;" />
<input type="text" id="originLng" style="width:6em;" />
<button type="button">Calculate distances</button>
</br>eg. 3.126547,101.657825
</div>
<div id="outputDiv"></div>
</div>
<div id="map-canvas" style="position: fixed; right: 1px;"></div>
</body>
I can't see any overflow controls specified in the CSS (apologies if I missed them).
Have you tried:
div#OutputDiv { overflow: auto; height: 200px; }
The height is just for testing purposes - but you could use Javascript to get the actual height and apply it using either raw javascript or jQuery.
A good example (including how to detect orientation changes if device goes portrait to landscape or similar) can be found on:
How do I get the new dimensions of an element *after* it resizes due to a screen orientation change?
I have a scrollable div with the following css:
overflow-x:hidden;
overflow-y:auto;
-webkit-overflow-scrolling: touch;
width:200px;
height:500px;
However on iOS devices, when the content inside of the div is wider than the div itself, x-axis scrolling is enabled. How do I disable x-axis scrolling?
I've been having the same problem and it seems that there are no x/y options for -webkit-overflow-scrolling unfortunately. The workaround I typically use is to wrap the scrolling div in an overflow-x: hidden div and problem should be solved.
Markup:
<div class="scroll-container">
<div class="scroll-wrapper">
<div class="scroll-body">
</div>
</div>
</div>
Styling:
.scroll-container {
-webkit-overflow-scrolling: touch;
overflow: auto;
width: 200px;
width: 500px;
}
.scroll-wrapper {
width: 200px;
overflow-x: hidden;
}
A really easy fix for this is just to make sure none of your elements are wider than the viewport. This can be accomplish by placing a "catchall" at the top of your CSS:
div, span, h1, h2, h3, h4, h5, p, img, ul, li, ... ETC ...
{
max-width: 100%;
}