I would like the view port on Safari mobile to prevent horizontal scrolling and also hide any horizontal overflow content. The reason being is that I have some animations on a website that move content off screen. As a work-around I can perhaps not animate but I would like to get it working on mobile.
When viewed on an iPhone 6 using Safari the code below allows horizontal scrolling and still shows the overflow content.
I see four posts on the subject but the suggestions for use of overflow: hidden are not working.
overflow-x: hidden, is not working in safari
Overflow-x:hidden doesn't prevent content from overflowing in mobile browsers
Mobile Safari Viewport - Preventing Horizontal Scrolling?
Hiding the scrollbar on an HTML page
Place this code in index.html on a server so the page can be viewed on an iPhone:
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />
<style>
html {
overflow-x: hidden;
}
body {
background-color: black;
overflow-x: hidden;
}
#content {
width: 100%;
overflow-x: hidden;
}
.tagline {
color: white;
font-size: 1.8em;
font-style: italic;
position: absolute;
white-space: nowrap;
overflow-x: hidden;
top: 10%;
left: 80%; /* This position is off screen on purpose */
}
</style>
</head>
<body>
<div id="content">
<span class="tagline">Testing span reaching outside edge of window on mobile</span>
</div>
</body>
</html>
If you position:fixed; the #content it would prevent it from scrolling:
#content {
width: 100%;
overflow-x: hidden;
height: 100%;
position: fixed;
}
Related
I noticed the scrolling functionality is different when using a flexbox based layout vs a position: fixed footer. The fixed footer is much smoother and shows a scrollbar. Flexbox isn't smooth at all, and does not show the scrollbar. I'd much prefer to use flexbox for my layout, but want the nicer scroll. Is there any way to achieve it with flexbox?
I'm testing on IOS 10 Iphone 7. Happens on both chrome and safari
Flexbox example
Fixed footer example
HTML:
<html>
<head>
<meta name=viewport content="width=device-width,initial-scale=1">
</head>
<body>
<div id='main'>
...lots of content so it would scroll
</div>
<nav class="footer">footer</nav>
</body>
</html>
Flexbox method:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
body {
-webkit-flex-direction: column;
flex-direction: column;
display: flex;
}
#main {
-webkit-flex: 1 1 auto;
overflow-y: auto;
min-height: 0px;
}
.footer {
height: 72px;
min-height: 72px;
background-color: blue;
}
Fixed footer method:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#main {
padding-bottom: 72px;
}
.footer {
position: fixed;
bottom: 0;
height: 72px;
min-height: 72px;
width: 100%;
background-color: blue;
}
there's nothing to do with Flexbox.it's only the problem about overflow.so add this : -webkit-overflow-scrolling: touch; will work.
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?
(I have been reading up on the topic of iOS mobile safari and how it displays some positioning and css styles differently.)
I am still trying to solve the issue which is having the background content to take up the entire display height on the iPad, I was hoping to achieve the same style as I have for the desktop and when I shrink the browser to tablet view. Instead the content just has a 100% width.
The background content has it's own tags. I am using media queries so that on mobile there is no background content and temporarily I have turned tablet display to none. If I turn display to block, I find I can shrink the browser and the background video or image takes up the entire height matching the top-section but On iOS it does not. -
Any comments or advice will be much appreciated.
meta data:
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
HTML:
<div class="top-section">
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="videos/screentest1.webmhd.webm" type="video/webm">
<source src="videos/screentest1.mp4" type="video/mp4"> Video not supported
</video>
<div id="video_pattern">
</video>
</DIV>
</div>
CSS:
#video_background {
display: none;
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1000;
overflow: hidden; }
#video_pattern { background: -webkit-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82) ); /* For Safari */
background: -o-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* For Firefox 3.6 to 15 */
background: linear-gradient(rgba(255,119,85,0.89), rgba(255,92,106,0.82)); /* Standard syntax */;
position: absolute; left: 0px; top: 0px; width: 100%; min-height: 100%; z-index: 1; }
.top-section{
background-size: cover;
background-repeat: repeat;
position: relative;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
z-index: 2;
text-align: center;
padding: 0;}
I think it's a bug, I can't get right 100% height by CSS.
window.innerHeight is the most reliable way to get the real viewport height.
Here is my hack to reset viewport height.
It's in closure and no dependent.
(function(){
var setViewportHeight = (function(){
function debounced(){
document.documentElement.style.height = window.innerHeight + "px";
if (document.body.scrollTop !== 0) {
window.scrollTo(0, 0);
}
}
var cancelable = null;
return function(){
cancelable && clearTimeout(cancelable);
cancelable = setTimeout(debounced, 100);
};
})();
// ipad safari
if(/iPad/.test(navigator.platform) && /Safari/i.test(navigator.userAgent)){
window.addEventListener("resize", setViewportHeight, false);
window.addEventListener("scroll", setViewportHeight, false);
window.addEventListener("orientationchange", setViewportHeight, false);
setViewportHeight();
}
})();
If we could see this live it would be helpful but you may need to apply styles to your body and html tags. Like this fiddle:
http://jsfiddle.net/Davidicus/2eaaP/
try adding
html, body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
Im pretty sure that iOS will force all video to play in the default player so there is no fix for you there yet.
I am working on an app for a client and am trying to create a button with a completely custom icon. The icon is 30px x 30px and transparent in the middle.
I have almost achieved what I want using this css code:
/* info button override */
.ui-icon-info-page {
background: url(images/G_help_icon_round.png) 50% 50% no-repeat;
background-size: 30px 30px;
background-color: black;
}
But there is a thin black circle that appears inside the icon, and also the icon image appears to be cut off:
I want to remove this circle and prevent the icon ? from being cut off. Also, I would like the question mark to be transparent instead of black, to show the image of the navigation bar beneath. If I try to set the background color to transparent though, the button appears entirely white:
How can I do this?
Update:
I tried applying this code:
/* info button override */
.ui-icon-info-page {
background: url(help.png) 50% 50% no-repeat;
background-size: 30px 30px;
width: 30px;
height: 30px;
margin-top: -15px !important;
box-shadow: none;
-webkit-box-shadow: none;
}
And got this result:
I'm able to move the icon around by adjusting the top and left margins, but it's edges are cut off outside a frame centered on the black circle:
Update 2:
Here is the button I am using (Note that it is invisible here because it is a white button on a white background):
Here is the html code that I use to load the button:
<div data-role="header" data-position="fixed">
<div><img border="0" src="images/G_iphone_navbar_logo.png" style="display:inline;"/> </div>
</div>
This should fix the issue
/* info button override */
.ui-icon-info-page {
background: url(help.png) 50% 50% no-repeat;
background-size: 30px 30px;
width: 30px;
height: 30px;
margin-top: -15px !important;
box-shadow: none;
-webkit-box-shadow: none;
}
Please ensure you are loading your application css file after jquery mobile css.
Edit:Here is a sample code based on the code you posted with the issue fixed
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<style>
#rightBtn .ui-btn-inner {
width: 30px;
height: 30px;
margin: -3px;/*Modify to change icon position wrt the header*/
border: none !important;
}
.ui-icon-custom {
background: url(http://i.stack.imgur.com/AqicD.png) 50% 50% no-repeat;
background-size: 30px 30px;
width: 30px;
height: 30px;
box-shadow: none;
-webkit-box-shadow: none;
margin: 0 !important;
}
</style>
</head>
<body>
<div data-role="header">
<h1>Page Title</h1>
</div><!-- /header -->
<div data-role="content"></div><!-- /content -->
</div><!-- /page -->
</body>
</html>
A demo here - http://jsfiddle.net/LCsmt/
Let me know if that helps.
In the HTML page below, I am scaling a block with a -webkit-transform. The transform scales the block from its initial size to its double size.
This works as expected with Safari, and Chrome on OSX.
But, on the IPad (both the simulator and the device), the scaling start from a single point instead of the original size of the image.
As you can see in the example I have set the viewport meta tag, but it does nothing.
Can anyone confirm this as a bug, and is there a workaround?
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no initial-scale=1.0, minimum-scale=1.0" />
<style type="text/css">
#block {
position:absolute;
top: 0;
left: 0;
width: 200px;
height: 400px;
-webkit-transition: -webkit-transform 3s ease-out;
background-color: blue;
}
.zoom {
-webkit-transform: scale(2);
}
</style>
</head>
<body>
<div id="block" onclick="className='zoom';">The Block</div>
</body>
</html>
I managed to solve the problem myself.
The solution is simple: just make sure the element is scaled to its original size to begin with:
-webkit-transform: scale(1);
There is one trick to it, though. If you, like I below, add a class to an element selected by #id, the #id has higher priority than the class and it will not show unless you tell the browser that it is important
-webkit-transform: scale(2) !important;
An alternative way to solve this is to not select the element by #id but by class (.block) or by element (div). Anything with lower priority than an id.
Solution follows:
<style type="text/css">
#block {
position:absolute;
top: 0;
left: 0;
width: 200px;
height: 400px;
-webkit-transition: -webkit-transform 3s ease-out;
background-color: blue;
-webkit-transform: scale(1);
}
.zoom {
-webkit-transform: scale(2) !important;
}
</style>
</head>
<body>
<div id="block" onclick="className='zoom';">The Block</div>
</body>
</html>
I came across this question very late. The solution was without using important, and by changing the way of selecting an element. This is due to reason that ID selector is more closer and powerful than class selector.
#block.zoom {
-webkit-transform: scale(2);
}