I have a native app that uses React Native WebView to wrap a web page.
<WebView
ref={webview => (this.webview = webview)}
source={{
uri: `http://localhost:8000`
}}
/>
In this example, the page is simply pointing to an instance of localhost that has the following code, which increments a number when the user scrolls:
var i = 0;
var $el = document.getElementById('counter')
window.addEventListener('scroll', function(e) {
e.preventDefault();
i += 1;
$el.innerText = i
});
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body style="height: 2000px; background: linear-gradient(dodgerblue, yellowgreen)">
<div id="type"></div>
<div id="counter" style="position: fixed">0</div>
</body>
</html>
The scroll behaviour inside a React Native WebView behaves in a way that is different to the browser. It waits for the scroll to finish before firing a scroll event.
Here is a comparison of the behaviour; in the browser, the scroll event fires while the scroll is in progress, as wanted and as expected:
In a React Native project in iOS 11, the scroll event fires after the scroll has finished:
This behaviour is used presumably for performance reasons but it's all but killing the intended behaviour of my app.
Is there another work around I haven't thought of?
How can I ensure the scroll event behaves in the same way as the browser inside my React Native app?
I found the below information on MDN scroll event documentation. I think issue is not related to react-native.
Browser compatibility
iOS UIWebView
In iOS UIWebViews, scroll events are not fired while scrolling is taking place; they are only fired after the
scrolling has completed. See Bootstrap issue #16202. Safari and
WKWebViews are not affected by this bug.
The problem was solved by using WKWebView instead of the React Native WebView.
Related
I am trying to accomplish a simple slide in popup animation in jquery mobile. I tested this on the desktop browser (chrome and firefox) and works fine. But in mobile i get the following results on pressing the button:
The popup comes in fine but creates a white space to the right of the screen which is visible if the user slides to the right. Dismissing the popup removes this white space. This only happens if the popup is triggered using "slide" transition. Does anyone know the reason for this behavior.
I can manually resize the window but I am not sure what event fires after the popup is done sliding in.
(I had images to show this but I don't have 10 rep so I cannot post them :( )
Does anyone know why this is happening. I am testing with Droid Razr Maxx (running Jelly Bean). I have tested with chrome, firefox and the default browser on the device. They all produce the same result. Here is my code:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>
</head>
<body>
<div data-role="page">
Pop Up
<div data-role="popup" id="pop" data-overlay-theme="a">
<p>Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup Basic Popup</p>
</div>
</div>
</body>
</html>
Upon further research, I found out that this issue was fixed in the latest version of jquery mobile (1.4) which is still in alpha phase.
http://jsbin.com/edeluh/32
I have use phonegap+jquerymobile to develop my mobile application.
I noticed condition below:
(step.1)I tap an textarea to input something
(step.2)I tap a select button with ios form control(prev/next), then the style change greatly. All the elements has been zoomed in.
I test my application in andriod. However, everything works as expect.The condition only shows in IOS.
Any idea? thanks a lot.
To prevent zoom when input element is selected use this viewport meta tag:
Android:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
iOS:
<meta name="viewport" content="width=device-width,user-scalable=0" />
Quick question, as I think this should be very simple for those who know how it works (HTML5 app building is new to me).
I'm using Phonegap to build an app, problem however is that the default built from phonegap is portrait orientated. Atleast, that's what it seems. When I test the app on my ipad the width is adjusted fine, bu the height for some reason is bigger then the actual content of the body. I narrowed it down to this line:
When I remove height=device-height it works fine. With other words, I'm getting the wrong height of the device there. When on landscape, do I need to switch to height=device-width or something? Because that seems kind a weird, I would expect my height to change based on the orientation.
I think the code below solves your problem. You need to use
<meta name="viewport" content="width=device-width, initial-scale=1">.
and this structure
<!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.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js">
</script>
</head>
<body>
...content goes here...
</body>
</html>
Check more info on JQM Anatomy of a Page
to work with iOS screens have to make two views, one for landscape and one for portrait, measures ipad screen is 1024 × 768 pixels then I think you should handle them directly with numbers, or keep trying with the options PhoneGap gives
Does anyone know an easy fix to make scrolling possible when using an iframe and fancybox2? The ipad, using mobile safari, still does not appear to allow scrollbars or touch scrolling
Do not show scrolls, just open fancybox with the height of the frame content, then user will scroll through popup as he does in usual window.
In the iframe template add mobile metas:
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
Call fancybox like this:
if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
$("a.fancybox").fancybox({
'scrolling' : 'yes',
'type' : 'iframe',
'autoSize' : true,
'autoResize': true,
'fitToView' : false
});
}
You might want to set the width.
That works for me.
I'm building a PhoneGap + JQuery Mobile app, but I can't seem to prevent it from zooming in with a double click. I followed the tips listed at http://www.tricedesigns.com/2012/01/17/mobile-web-phonegap-html-dev-tips/, specifically by adding:
<meta name="viewport" content="width=device-width, user-scalable=no" />
Does anyone know of a solution for zooming?
Try:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
This is what I use and I don't get any zooming behavior.
Here is the Apple documentation for the viewport meta tag: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html
Place "user-scalable=no" in to your meta tag
like this
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
This is the best way to stop zoom in mobile, Its work for me in phonegap
The accepted solution does not seem to work in iOS10, this does:
// stop ios bounce and zoom
document.ontouchmove = event => {
event.preventDefault();
};
This will stop move events reaching the root element/browser