This is my 1-st question at StackOverflow.
Description
I'm trying to test RStudio Connect 1.4.2-15-x86_64.rpm.
I write Rmarkdown document which is well compiled as on Windows (dev platform) as on CentOS (server platform). This document is much longer than web screen height.
While content of document well scrolled on Android mobile and all PC platforms and browsers, I have issue with vertical page scrolling at mobile iOS (iPhone & iPad). Content outside physical window is hidden.
I tried all popular browser on iOS like Safari, Opera, Yandex, Mozilla. The same situation happened in all browsers. It feels that error is at iOS web rendering engine level. Looks like issue 'IPad Scroll Issues with Fixed Content'.
Question: How I can workaround it at R\package\css\pandoc level?
P.S. I've created short video snapshot with Good scrolling at Desktop browser and Broken scrolling at iOS browser.
Related
I started porting my iOS app (which works on iPhone and iPad) over to Mac via the Catalyst route but WKWebView is behaving very strange. All the content is too small, it looks like it thinks the monitor is 2 times bigger.
The website I am displaying is responsive and works correctly on iOS devices as well as a Mac in Safari. On iOS it looks the same in Safari and WKWebView but with Catalyst and Mac Safari, the Catalyst version is much smaller.
I also tried this with Google.com and the issue is the same.
Anyone knows what might be happening? Since this doesnt happen just to the single site, I guess the issue is with WKWebView?
Are you using the Mac or iPad idiom for your Catalyst app? The “iPad” idiom, which is the default (and only option for apps that support Catalina), will downscale your entire app to 77% it’s original size. Read more here: https://developer.apple.com/documentation/uikit/mac_catalyst/choosing_a_user_interface_idiom_for_your_mac_app
My guess is that your app is being downscaled, including the web content. You could fix that by switching to the Mac idiom. If that’s not an option for whatever reason, maybe you could try scaling the web content back up with CSS?
I have an app that is built with PhoneGap. One page in the app copies the contents of other page's canvases as images. This worked fine on older versions of iOS, but recently I noticed that the copied canvases are sometime blank. The rest of the page is rendered correctly. I don't know which iOS version it crept in, but I'm currently running iOS 10.3.1 on my iPad Pro. This does not happen when the same code is running as a WebApp in mobile Safari (or Chrome, or on my Mac laptop browsers).
Using the debugger on the App, I can restore the page by simply toggling the display property. This indicates to me that it's a rendering bug in the built-in Webview that Cordova uses. I currently have a patch that toggles the display property. This works, but it causes flickering even with requestAnimationFrame() or SetTimeout(fn, 0).
The app is built with cli-6.5.0 using PhoneGap Build.
Has anyone else seen this bug or have a better patch?
Follow up:
Toggling visibility fixes the flickering. When the problem occurs the canvas behaves like it's not visible, but the DOM reports that it is. Also the problem seems to occur when the canvas is copied under an Ajax callback. Delaying the processing with setTimeout() does not solve the problem.
I've built an mvc app that i've loaded up to azure and on a desktop it looks fine. But the layout is a bit all over the place on a mobile device. Rather than publishing my changes to azure every time I make a design change is there a way I can see how it would look in a browser eg. chrome on a mobile device? One way i'm doing it is just resizing my browser on the laptop to the size of a mobile device and that kind of works but just wondering if there was a better way.
Thanks,
Jerome
You can use F12 option which have toggle device toolbar option in chrome. That would help you see the responsive respective design of your app in all the popular mobile devices chrome gives as an options to test on. plus you can use custom sizing to adjust width and height of the screen to manually check the responsivity.
Working on a site and got feedback from the client that when browsing the site on an iPad and iPad Mini the site will suddenly reload with the message "A problem occurred with this webpage so it was reloaded".
The site it's happening on is a fairly image heavy one, it's infinite scroll page with about 60 entries, retina enhanced imagery via <picture> element.
Never seen this before, what's causing it, and how can I get around it?
Perhaps it runs out ouf memory? But I thought iOS was smart enough to dump images out of view if it needs memory to load new stuff?
Apparently this did not happen on iPhones (I take it they tried with 5S and 6), but that's probably because the total screen resolution is much lesser and the images are smaller in file size..
The only way to find out is to plug an iPad/iPad Mini into a Mac running Safari and inspect the page runing on the device. So, first, turn on the "Develop" menu (in OS X Safari's Advanced Preferences), like this:
Then from the Develop menu you can select the device you want to inspect Mobile Safari on… like this:
That gives you effectively the same inspector that the desktop version of Safari uses and hopefully you'll find some clues as to what is going wrong. (I'm betting Javascript error).
I'm trying to debug a problem with mobile Safari.
I'm using the desktop Web Inspector and a connected iPhone, and it basically doesn't work in any useful way.
DOM elements don't expand. I click on <div id="content">...</div> which contains 50 other DIVs and nothing happens except that the close-div disappears.
No CSS shows in the right-hand panel for any selected element
Images can't be loaded (I just get a spinner)
Are there known problems or incompatibilities? I'm using
Desktop Safari 6.0.5
iOS 7.0.4
I had this problem, too - you'll need to update to Safari 6.1.