If you open any popup image in the Android browser, then click in any place on the page, the image is being changed (colors/sharpness/whatever - I can't define precisely, since I'm not an artist).
To see this effect, open a site with a popup image, which is implemented as a div with absolute positioning (say, http://highslide.com/ -- the first site I've googled). The site should be open in the Android browser (I've tried Android emulator from Eclipse ADT plugin and Kindle Fire). Click on any preview to popup the image, then tap on the page (keep you finger on the screen) and look at the image the same time.
My question: what this effect is about and how to eliminate it? Why don't I see it neither on PC nor on Mobile Safari? I have the same effect with my web-app, where it looks ugly and seems to be slowing a form, so I want to get rid of it.
A figure:
I've enlarged a portions of two shots, made before tapping on the arrow point, and after, and inserted them on top to show what I'm talking about.
Regards,
There's nothing wrong with your web app or your web page, this is simply a performance feature of Android. You can see this on the homescreen when you scroll and it happens in any application that scrolls.
When you tap, it signals to Android that you might potentially start scrolling. To prepare for this, it uses a compressed version of the images to make scrolling smoother.
You don't see this on your PC because your PC has no problem scrolling through a web page with tons of images at full resolution. As to why you don't see it on mobile safari, I don't know enough about the platform to say.
If every image on the page has the same physical size as specified in HTML/CSS, this effect disappears. That's why I observed this in popups: their inner images usually are resized.
I have mixed feelings. Kinda satisfaction for finding it after all and hatred to Android developers for programming this feature.
Related
I have a header SVG image on my website landing page, https://www.csselectronics.com/.
This header image displays correctly on all desktop browser I've tested. However, I've recently found that it sometimes does not display at all when using a smartphone (e.g. iPhone 10, iPhone 11, Android phones).
The image simply is not loaded, though if a manual refresh is done on the page it seems to load correctly. The non-loading can then be re-triggered by clearing the image cache on the phone.
Any idea what might cause this issue?
This was the result of using negative margins on the image div container.
I'm using fullpage.js for an html5/css3/jquery based app for Android 4.2 tablet, that I generate with PhoneGap web service. On PC and emulators everything works smooth and fast, but on tablet itself scrolling between sections is very slow and choppy. Scrolling between slides is a bit better, though not smooth either. I have css3: true in fullpage.js options and I use very light-weight images and elements for the app. Let's say each section loads around 50kb per scroll. I have fixed background for all sections and it stays in place without lags, only loaded per-section content is getting choppy (it looks like it's loading in square patches).
When I open the same html files in tablet's Chrome browser, everything works smooth as well. So I believe it's Android's default WebView causing this choppiness and issues. Is there any way to make it work smooth with fullpage.js?
The link you just posted took 94 seconds to load on my PC using Chrome. And it had plenty of console errors.
Besides that, it is clearly a problem of performance with your site.
You are trying to create a HUGE website layout. With 30 sections and nothing less than 105 slides...
Do not expect it to work smooth on a mobile phone. Your layout in a 1280x1024 resolution is creating a layout of 28.170 pixels height and a few more thousand pixels width. And all of it has to be moved on every scroll.
You can probably make it easier for your browser if you implement some lazy load technique (or even an ajax one for the section/slide contents). This way you will still having the huge layout but it will be empty at least.
Check out this answer for that.
You can even take a look at the lazy load option fullpage.js provides.
Also, using the option scrollBar:true might improve the performance.
I have a webview which opens a page that shows different images like a gallery.
The image is saved locally on an sdcard and is loaded through css with background-image: url(file://...).
This issue seems (not sure though) to be connected to Android's request for resources for some reason. The longer the OS needs resources the bigger the white (or black) band is.
This doesn't happen always in one test session and affects images randomly (in a cycle a certain image displays ok, in the next it doesn't). Also it seems to affect only images, displaying an iframe is always loaded normally.
I wouldn't have a problem if this happened for one second and then it would display normally, the problem is that the image stays like that until the next refresh of the webview.
android's version is 4.4.2. It is a mk808b plus device if any of this helps...
Any ideas on how to solve or somehow decrease the times this happens... anything really... except using imageview, I want to keep all in the webview. Any directions to follow for further debugging are also greatly appreciated.
Thank you for any help you can provide.
If it is possible I would try converting background images to a vectorial format (like SVG). Rendering should be easier and less memory hungry.
The idea is to build a website which can grant a mobile and desktop user the full experience. 'The full experience' meaning the use of jquery.
The most important thing is accessibility, so I'm wondering if their is a cross platform way to build a slider/carousel which supports text, links and most importantly touch swipes.
To improve speed, I'd much prefer to load the slides seperately. I understand ajax maybe the solution.. but haven't a clue how. Can anyone direct me towards any basic tutorials that cover this?
A follow up question to the last.. Is ajax safe for dynamically loading content onto mobile devices too?
Also in terms of website layout. Most of the layout will change depending on css media rules when the page is resized. But there are a few elements that will need to teleport depending on the size of the screen.
I considered creating separate elements that would be hidden and shown with jquery/css, but not particularly liking the sound of the code being loaded when it's not needed.
This is slightly different to the sliders in the sense that this code needs to be instantly responsive if the screen size changes (for example, a tablet user changing from portrait to landscape.. or a desktop user zooming in.)
I just don't like the sound of code being loaded if it's hidden.. what is best practice for this?
Again the questions are..
How can i go about building a cross-platform slider, that allows text,links and touch swipe (literally have no idea where to start with touch swipes.)
How can I dynamically load content? (with ajax)? Will this work with smartphones too?
Do people load 'layout' code (on page load) that is only visible if certain parameters are met (eg screen-size.) An example being 2 different menus, one for a small screen and one for a large. Or is there a safe way to load layout code only when it is needed, which would reduce page load times (especially for mobile users.)
thanks
3) touch swipes work the same way as a click + drag, so you should be able to use the same code for mobile and desktop. Here is a great example of this: http://scripterlative.com/files/dragdivscroll.htm
I am currently working on an application that requires the use of a WebView. It basically takes up the entire screen space.
Initially the images inside of the WebView look fine and high quality. Unfortunately, when a user taps (and holds) a button in the webview, the images then lose quality and dither until the finger is released. Is there any way to disable this?
A good note, my app does not need any scrolling whatsoever. I thought Android would only lower the quality on scroll to better performance.
the only solution is to make your own image viewer, the webview resamples images at lower qualities
I've been dealing with the same issue for a long while. The best solution is to split the image into several sub-images and load them altogether within the same html file.
The easiest and fastest solution I found is with Adobe Photoshop:
Open you image
Create horizontal and vertical guides
Select the Slicing tool and activate the "create slices from guides"
Save for web (I'm not using the English version, but you get what I mean)
Select your desired image format
Save, but while saving check the option "Html and images"
With this, you'll avoid dithering with any image as long as you split it into enough pieces,