I'm developing a cross-platform application and I'm having a bug with only one of the test devices I have: The tablet HP Slate8 Pro (model 7600es).
The problem is that in many places of the display, there are weird pixels, like it doesn't get anti-alias-ed properly. Here are a few screenshots of what I mean:
The first one gets pretty clear. It's a part from a linear plot, and this green line just gets weird. Same for the circles.
The second one is harder to see, but there's a grey line in the middle that's also kind of broken, and the 8 and the second zero are not right
And finally, the last one is some text that's also wrong.
My viewport meta tag is:
<meta name="viewport" content="height=device-height, width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
And my cordova version is 3.4.1-0.1.0
What's really strange though, is that the last app I made with cordova doesn't have this bug in the same tablet. The main difference between these two is that the old one was made with AngularJS and Bootstrap and this one is made with Ionic (That works on AngularJS as well). I don't really know if this could be related.
Also, testing this app directly in the Chrome browser of the same device, the bug doesn't show up. Then I think it only happens when using the cordova's WebView.
Anyone has any hint?
======= EDIT ========
I just found that putting target-densitydpi=device-dpi in the viewport meta tag "patches" this issue by disallowing density resize, thus making everything look way smaller than it should making my application almost unusable.
So, it really looks like the WebView is scaling all the webpage to match mdpi dimensions, but fails at anti-aliasing the resized pixels.
Probably I will post an issue to ionic.
Related
After pushing my site to the development server, I'm seeing horizontal scrolling on iOS (which I wasn't seeing when developing locally). I'm using an off canvas navigation menu which is giving the page the extra width. Here is the site.
Any help is greatly appreciated. Thanks for your time!
I inspected your site in Desktop Safari and I see the same issue.
The issue seems to be that the site layout still thinks it's wider. At first I was certain that a simple application of overflow-x:hidden and width:100% would do the trick.
However—
You seem to have done that.
It didn't.
I found it difficult to sift through the CSS because you have a lot going on, and I think it's possible that the CSS3 transforms are contributing to the issue, but I was able to lock it down while viewing in Desktop Safari and while inspecting Mobile Safari directly with the following:
Apply position:fixed to your primary navigation, rather than position:absolute. Desktop Safari was happy with this.
Remove your .site-content::before pseudo-element. This was still causing the issue on Mobile Safari. Removing the CSS transform to translate3d(100%,0,0) also helped.
Side note: You might also consider ways to simplify your HTML and/or CSS. You have 1.1MB loading without any real images; for mobile users, bandwidth is a real cost. I know that can be a PITA but worth mentioning. Good luck!
I have an app that a couple of clients are using, and we've noticed that during certain cases of using the app that the view moves up when using the keyboard. Which, the view then becomes stuck there, like space is constantly being added to the bottom of the view, making it look like the bottom of the view.
This only appears to happen on iOS (devices are using either version 5, 6, or 7), but not Android. I've tried changing the option KeyboardShrinksView directly in the iOS project (we use appery.io and are building the iOS project by exporting it through Appery).
The last time I looked at the problem as several months ago (we're beta testing a much larger project) and I did see others online saying that they experienced similar issues. So I don't know if others still have this issue, or don't now with the semi-recent release of phoneGap 3.3.
Even if this question has been asked before, I'm hoping that the issue will get back to phoneGap.
Thanks
i've seen similar issues been solved by adding height=device-height to your viewport in your html.
<meta name="viewport" content="height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
if that doesn't work, try forcing a page redraw on input blur, like shown in this post:
https://stackoverflow.com/a/18856929/1656561
We are developing an HTML5 + CSS3 application for iPad and iPhone.
The app is working fine on iPad & all iPhones, however, iPad 2 shows html dom objects pixellated on startup, and stays like that, sometimes always, sometimes for a few moments.
App is designed for touch and gestures. We used translate3D for hardware acceleration on scrolling objects. We are also using jQuery (v1.7), but the scroller we designed is pure javascript, no frameworks there. jQuery is mostly used in finding/adding/removing dom objects and ajax. Except jQuery everything else is in-house written, including the jQuery plugins we are using.
As i said, animations are achieved by translate3D. For sliding effects we are changing the x or y axis values of the -webkit-transform, and when the touchend event is received, a momentum animation is achieved with javascript, -webkit-transition and translate3D. While app is being written, Apple's iOS Safari documentation is highly used as a guide.
Even though the app is working fine on iPad, iPod Touch (2nd gen), iPhone 3gs and iPhone 4, when it comes to testing on iPad 2 we started to see this pixellated screen. The strangest part is, the 3d accelerated content is the only part that gets pixellated. I've attached two screenshots, one from iPad, another from iPad2. You can see what I meant (they are taken in different times of the same day, so the content is different, sorry for that).
The main content (the boxes with images) can slide up and down with touch events. On iPad2, only this part is pixellated. While sliding, the pixellation stays most of the times, but on some tests it resets after a few seconds.
In addition, the html content has this line in :
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
We are starting the hardware acceleration through CSS, and the main sliding objects has this property :
-webkit-transform: translate3d(0,0,0);
For flicker proofing, images are not inside any dom object that has a background color, and has this property :
-webkit-backface-visibility: hidden;
For more flicker proofing on some cases we used this property (but the pixellated content in the screen capture does not have this one assigned):
-webkit-perspective: 0;
The app does not have 'apple-touch-startup-image' at the moment, so our first thought was that the startup capture ios makes is somehow messed. But it turns out that is not the problem, as after the content is downloaded via wi-fi, pixellation stays the same.
If anyone ever came across to this or a similar problem and was able to solve it, please answer as we have no other ideas left.
I tried to give as much information as I can, and here are the screenshots I've promissed:
iPad :
iPad 2 :
Try removing the transform and reapplying it immediately through a timeout:
$("#sliding").css("-webkit-transform: none");
setTimeout(
$("#sliding").css("-webkit-transform", "translate3d(0,0,0)")
, 0);
Does anyone know if the iPad has any limitations on the canvas tag?
Currently I'm working on a creative that uses a flipbook and audio tag combination to simulate inline video content. The animations are drawn to the canvas element and synced with the audio content being played. There are 4 short video clips that get played when someone clicks on the four buttons below.
http://cs.sandbox.millennialmedia.com/~tkirchner/rich/K/kungfupanda2_test/
The problem I'm having though is in iPad. After playing a few animations, mobile safari just suddenly crashes. It never happens when I play it on my iPhone but it happens every time on the iPad. Its not one particular animation either because if I click a different combination of buttons, the previous clip that it crashed on plays fine, and then it decides to crash on another clip.
I think the problem might have to do with the amount of memory Safari gives individual page views. I found a blog post that explains that problem pretty well.
http://roblaplaca.com/blog/2010/05/05/ipad-safari-image-limit-workaround/
According to that post, once mobile Safari reaches a particular threshold of memory, images begin to return blank. This is consistant with my finds so far. The iPad that I'm testing this all on is running iOS 3.2.1 (and before anyone tells me that I should just explain to my boss that nobody uses 3.X anymore, I tried... they still want me to investigate this). I borrowed a co-workers iPad running iOS 4.2.1 and that device didn't crash, but some of the images weren't being drawn to the canvas.
I'm pretty sure its a problem with the canvas tag too, because I tried experimenting with running the animation without drawing anything to the canvas element, and the page never crashed.
Thats why I think maybe its a limitation with Safari's support of the canvas tag. Of course, I'm open to anybody else's suggestions.
Feels kinda weird answering my own question again, buuuut I figured if anyone did a search on this kind of question, an answer would be helpful.
I believe my original hypothesis was correct. The total amount of images that the aniamtions were using was around 600+. I think the older iPad loaded as many as it could and then when it ran out of cache and the canvas tag was trying to draw images that weren't really there anymore, it crashed.
Eventually we ended up serving the ad to devices with iOS 4.2 and higher, since the problem didn't seem to occur on those newer devices. Plus, we compressed the image sizes further, so that helped reduce the amount of images we were storing into memory.
If anybody knows approximately what the cache threshold in iOS 4.2 or higher browsers are, I'd appreciate it if you commented. Just want to get an idea of how many KB of image data I can safely load.
Im currently developing a WebApp for the iPad, now it depends on the viewport (screen-width and screen-height)
Im currently looking to somehow make it dynamic so when the user rotates the ipad, it actually resizes the viewport of the page
Has anyone done this or attempted it and been successful, i would think its just a small snippet of Javascript
Have you tried using: "device-width" ?
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19
Just meta viewport and CSS. Here is a demo (although it rearranges rather than resizes, the principles are the same).