I use WebView widget in my project to display HTML5 videos or different content in HTML5 or not. I have no problem to render these HTML5 pages (using video or not) if my WebView is in MATCH_PARENT and fit my screen device.
A problem occurred when I see HTML5 video and other HTML5 elements (using 3D properties? checking progress...) in WebView with fixed size. I suppose that my problem occurred when the WebView renders some elements on the SurfaceView which causes a shift of content when the WebView layout param isn't MATCH_PARENT.
Let me explain with an example, consider a device in 800 * 600, I decided to center my webview which has a width of 400px. So I can see 100px to the right and 100px to the left of my webview, normal.
I see my HTML5 video cropped to the right. The width of the crop is the offset between the left border of the screen and the left of the webview.
If I increase the space to the left of the webview, the crop will be have the same value of this space.
From youtube page, the HTML5 content is displayed correctly with the same size of my webview but just my video HTML5 element is cropped ...
For a better understanding, I let you see the screenshots that will be more understandable ...
http://android.googlecode.com/issues/attachment?aid=405500000000&name=webviewhtml5-vimeo-cropped.png&token=2lYIR8vnq0aGAHjQ4Ppvj9bs6hg%3A1354812792302&inline=1
The problem appears from Android 3.x to 4.0.x. From Nexus S phone running Android 4.1 and Samsung Galaxy S III Android 4.1, the problem is solved.
I am surprised to find no one who has reported this problem on the bugreport or stackoverflow? Generally, I think the webview is used in fullscreen.
If you can reproduce this problem with a basic project, go to this address :
http://code.google.com/p/android/issues/detail?id=40550
Related
I'm loading my website into a webview, and all the text elements' font sizes are increased by a factor of 1.375. It works fine on chrome on the same device but is looking completely wrong on a webview inside the app.
I read font-boosting is one of the causes of this, but why is the webview resizing perfectly legible text of size 24px to 33px?
I'm using android 4.4 to test the app.
Okay, I think I have the answer. You need to set WebSettings.setTextZoom to 100 if you want to retain the original functions. This call only works API level 14 and above, before that you can use TextSize
I have a webview and it displays a video link over the internet. Bu when the video was loaded it scales the view bigger than my linearlayout. But I want it fit into my linear layout. I've tried some methods like LayoutAlgorithm.SINGLE_COLUMN or writng the scale property manually but I couldn't find the right solution.
How can I scale it dynamically?
You may like to try setInitialScale ( http://developer.android.com/reference/android/webkit/WebView.html#setInitialScale(int) ). This will help to "zoom" the page (or the video) shown in the Webview to fit a particular width. Actually the size of HTML5 video in that page is decided by webkit engine and we cannot directly change its size from App layer.
You may also want to calculate the expected width yourself, due to the fact that Android devices have hundreds of screen resolutions and the width of your LinearLayout may vary on defferent devices.
I am facing a curious problem with the last update of Android (4.4) : my CSS rendering is visible at screen for the user which means that my webview content is very thin before to adapt to the width:100% of the CSS.
I am using an android.webkit.WebView to display an html string like this :
webView.loadDataWithBaseURL(null, html, "text/html", "utf-8", null);
This webview has the following size set :
90% of screen width for webview width
WRAP_CONTENT for webview height
The CSS is built to fit the webview width, the height will then adjust itself. There is no absolute width or height set in the css.
When I display my webview (which is already fully loaded as I used onPageFinished callback to know the loading is finished), the CSS starts to be rendered. This is surprising me as I thought it should be rendered when I loaded the webview.
The problem is that for the user, a very small white line is displayed and then this line adjust itself to match the webview settings.
If I fix the width in the CSS, I don't have any rendering problem. But I cannot do that as I want to match all screen sizes.
There was no problem before Android 4.4 as there was nothing displayed on screen until CSS was fully rendered.
By the way, I was using the setPictureListener() method from the webview. I know that this method is deprecated (and obsolete for a while), but it was the only way to know when the webview had really finish to be "drawn" on screen. If I use this method in Android 4.4, it is called many time and this error comes up in DDMS :
W/UnimplementedWebViewApi(23891): Unimplemented WebView method run called from: android.os.Handler.handleCallback(Handler.java:733)
I don't know if there is a direct relationship, I don't think so as even not using this method, my CSS is not rendered correctly.
I tried many things :
use javascript onload to make the body visible
use a chrome client on the webview and wait for progress to be at 100% to make my webview visible
use a webview client and wait for onPageFinished to make my webview visible
use a postDelayed of 500 ms when using the PictureListener to make my webview visible
use all layer type choices : HARDWARE / SOFTWARE / NONE
make my webview parent firstly INVISIBLE / GONE and then VISIBLE
but nothing worked.
It seems like the CSS is rendered only when the webview is visible for the user.
I cannot show source code as it is for professional purpose so I would only like different point of view on where I could be searching (or if someone has already see this curious error in DDMS)
Has someone an idea on how to wait for the CSS to be rendered in the webview before to display this webview ?
Many thanks
I managed to fix this problem.
I had a display: table; in the style of the main div of my HTML and removing this makes my rendering looks good.
As it was working well with Android previous version, I am not able to determine if it is a bug of the webview, or a problem in my CSS.
By the way, thanks for having a look at my problem
I have a poster image on a video that is shifted down about 40 pixels leaving whitespace above it. When the video plays it moves up and plays in its correct location. Also, the control bar centers vertically on the video instead of aligning at the bottom of the video.
This video is being rendered in an Android WebView. Works fine on all other browsers without the fantom margin or odd control placement.
I'm wondering if any of my css could be throwing it off (When I check the computed values in Safari Web Inspector both padding and margin are 0)
Above the video poster image can be seen with the fantom margin. The poster image should be flush with the hairline divider.
I believe the above issue is related, the video controls are centered vertically on the video when they should sit at the bottom. You can see that the video has shifted up in that margin.
Eventually the controls fade away and the video plays as it should.
Is there any way to apply css directly to a video poster? I'm guessing the poster is displaying awkwardly because it is a different size than the video. I'm wondering what CSS I'd need to handle this.
My CSS foo is not that great. I'm more a native developer.
This was a problem with my CSS. Eventually I had to wrap everything in a div an put height and width to 100%
I made this little web gallery
http://chocochomp.com/
and I have two main problems:
On my old Android 2.3 feature phone web browser (the one delivered with the phone), the divs are not wrapping properly.
Actually, the different LI blocks are left floating like a stair to the right of the page without never wrapping.
The other problem is perhaps a bit more fancybox 2 related.. so, no need to answer this part:
On smartphones, the fancybox 2 popup gallery is not centered on the screen but on the page!
problem: when the page has a big height, the gallery doesn t appear on the screen..
Here is the source code: https://github.com/mime29/Choco
Thank you for you help