I have a WebView that is working perfectly. When I scroll it (up or down) past it's content I see a white area "Behind" the web page. (had an image here, but couldn't post due to being new).
I would like to set the overscroll color to clear.
To be precise I have played with setting the WebView background to transparent, and that does not achieve the desired result. That makes the entire page clear to the background of my app. I only want to see the app background if the user has scrolled past the contents of the window.
Any ideas?
Try this:
yourwebviewname.opaque=NO;
Related
My goal is to view the content of the bottom page from the top of the other content page. In order to accomplish this, I used PushModalAsync to navigate and set the BackgroundColor property of the navigation page to Transparent. I can view the content on the bottom page on Android. However on the iOS platform, a black color is always displayed and I am unable to read the content of the bottom page. Why is the background color always black even when it is set to be transparent in PushModalAsync?
Note: The iOS platform displays a white screen when I change the navigation to PushAsync.
Expected Behavior:
Background color should not be black and it should be transparent when navigating using PushModalAsync
Actual Behavior:
Background color is always black even when the content page background color is set as transparent when navigating using PushModalAsync
Android Screenshot
iOS Screenshot
The issue reproducing sample is provided below:
DemoSample
If you want to do EXACTLY like that, it is not possible (it will require so much work that you can't expect someone to provide you the solution here).
On iOS that control (ViewController) is drawn that way in that presentation mode. So as long as you use that control and that mode it will work that way irrelevant if you use Xamarin or something else. As ViewControllers are most basic controls it is not realistic to replace them with something else. But you can replace presentation mode. In Xamarin.Forms you can do that this way:
<ContentPage ...
xmlns:ios="clr-namespace:Xamarin.Forms.PlatformConfiguration.iOSSpecific;assembly=Xamarin.Forms.Core"
ios:Page.ModalPresentationStyle="FormSheet">
...
</ContentPage>
This will result in somewhat different visual presentation but that is the only way to have one ViewController drawn over another without going into some deep customization that would require tons of code, especially on Xamarin.Forms.
You can also try some other values, but the default value will not work.
In iOS, the hierarchy is managed by the view controller. Each page has a separate view controller. A page consists of a window, a root view, and a subview. You cannot see the layout of the previous page by setting the background color to be transparent.
For more details, you can refer to the following documents:
User interface | Microsoft
The View Controller Hierarchy | Apple
When I include all the content inside (means image works as a View) that image loads to slow. When you navigate to that screen everything is there but image loads quite late and that screen looks like very unprofessional because of that. I have many screens where image used as a full screen background and all those screens have the same behavior. Is there any solution for this issue?
I am working on winRT XAML application, in my main page i have some large images. When i launch the aplication it shows blank screen for a while in between splash screen and main screen. Any solution for this? i think same issue as in Phonegap showing white screen after the splash screen - IOS but its in winRT in my case.
This sounds like something I experienced in the past when I set the page background to an image. It can take a little while for the image to get loaded and displayed on the page, and therefore you end up with a fraction of a second of unstyled page. Is that what's going on here? If so, try reducing the size / quality of your image to see if it makes a difference. If it does, your work is just starting as you try to find an acceptable compromise between image quality and file size.
Look up "extended splash screen". The technique is basically that you make your app display a splash screen image on a solid color background that looks the same as the one displayed by the Windows shell when it starts your app. The splash screen image is small enough that when your app starts showing just the splash screen - it shows seamlessly and then you can load your first page in the background.
I'm having some issues with a website that only occur in Safari. I'm running version 5.1.7 (7534.57.2) on a Mac.
You can view the site here: http://mcad.edu/annual-report-2011-12/.
The website is parallax scrolling, with a relative positioned content div that holds everything, including the 3 parallax scrolling backgrounds which are all fixed, top and left set to 0.
Within the fixed parallax background containers, colorized images fade into full color images when a user mouses over them. For each "image", there are two divs stacked, each with background images that are positioned by background-position. The div on the bottom has the colorized image. The div on top has the full color image as a background and has its opacity set to 0 until mouseover. The fade is achieved using a CSS transition on the opacity property so that the top div becomes visible.
So, in Safari only, when I mouse over any of these divs, the transition occurs smoothly but all of the content in the same parallax scrolling background div shifts/jumps in the process. If I remove the CSS transition, this does not occur.
I think that it might have something to do with the transition/webkit-transition property not playing nicely with a fixed position container in Safari. However, all of the issues I've found that relate to that are from 2010 and mention a Safari bug that I assume has been fixed…two years later. But maybe not.
There's also another issue with the Catalyst section (3rd dot down on the right navigation). These animated images work as links in Chrome, Firefox and Opera, but not Safari. Any ideas?
I have a similar issue with a fixed position and transition-duration for a header menu I've created. When a visitor scrolls down, the menu has a box shadow that fades into place. Well when this is viewed on safari in a MacOS, I get a weird sliding in issue. To easily fix this, after spending way to much time searching for answers, I'm removing the transition effect for macs. This fixes the slide in issue but gets rid of the transition effect sadly.
So as you were speculating, it probably is the transition duration on your project as well. The best thing for this would probably be to make a Mac-Safari CSS file, get rid of the transition-duration for that particular area and move on with your project.
Best I can suggest for now. Hope it helps.
How can I set the image "behind" the view when elastic scrolling kicks in?
By default it's just white, I'd like to set it to a color or an image- like how Safari has linen behind its' WebView and so on.
The way I'm currently doing this in my app is just by adding a big UIImageView behind the scroll view in my view controller.
I spent a while messing around with the background image property on table views and stuff but I encountered a lot of weirdness when I changed the contentInset/contentOffset if I did it that way.