I'm experimenting with different techniques using Amazium here http://stevengeorgeharris.com/croft/croft; when viewing on an iPad the image of the ballet dancer is missing, yet appears on everything else including Nexus 7 and iPhone 5. I have played around with positioning and z-index's but nothing happens.
I then went into IOS simulator to use web inspector and I noticed when I refresh the page the image appears and quickly disappears again. I cannot for the life of me find the cause of the problem, maybe I am over looking something very simple, as I usually do.
Change position:relative to position:absolute for it to show up on iOS.
i just see the website try to add overflow:hidden it will be good in regular explorer but it will not work in iOS but look nice
Related
I am having a very weird issue on an iPhone and I would like to have suggestions on the best way to troubleshoot. My web application works fine for a moment then suddenly all text fields and buttons will have no effect, but only to open the virtual keyboard.
For example, a "delete" button which used to display a "yes/Cancel" modal will only make the keyboard open, the modal won't show up... When I reload the page, everything is working as expected again.
I am testing with an iPhone 6 and Chrome.
Did someone already encountered an issue like that?
I have absolutely no idea how to track down this behaviour and all suggestions are welcomed, What do you suggest I should look in priority?
This issue was coming from a bug in a version of Chrome I was using at that moment (I have no idea which one, since my phone has regular automatic updates).
I strongly advise to have always at lease two different platforms when testing websites!
I'm making a web project that is fitted to the iPad screen. I'm trying to make it look as much like a native app as possible. It is loaded in safari or atomic browser. What I'm trying to find out is if it's possible to eliminate the drag and even the zoom functions of one of those browsers for just that site.
To rephrase, I want to make my site fixed on the screen at all times. The issue is, a user will try to hit a button and it will drag the screen.
PS. An additional question is how I can make it so images don't have the "save as" functionality if held down I tried putting a span over the images, and that worked for firefox, but not iPad safari.
If you can solve any or all of these, you would have my biggest thanks!
Turns out that there are several metatags that you can put in your js file which keep the screen fixed. Good stuff on that is here:
http://jakeboyles.com/2011/01/16/how-to-build-an-iphone-and-ipad-web-app/
As far as the "save as" issue, I don't know yet, that part of my app development hasn't been solved.
I am developing a small web application optimized for iPad (using mainly javascript & CSS quirks and hacks). However, there is an issue that I just can not find or come up how to resolve.
The thing is that if I change the orientation of the iPad, during the rotation animation a transparent ("checkered") background is shown in the places that were not rendered in previous orientation. One guy on forums.macrumors.com posted an excellent screenshot illustrating this behavior. The thing is, since my application has a rather dark look and & feel, this checkered background showing during the rotation seems to be awkwardly out of place.
However, this guy's screenshot was for the iPhone - that said, and considering that stackoverflow.com is more programming-focused, I thought I'd ask if anyone struggled with and, hopefully, successfully resolved this issue.
Safari displays the checkered background when the rendering can't keep up (try scrolling really fast). As far as I know there is no way of changing the pattern.
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.
I've been working on an iPad-specific site that uses HTML5 video and though I've got video playback working, I can't for the life of me get the poster image to appear. It looks fine on Desktop Safari. Here's the code:
<video src="video/about_the_man.mp4" controls height=360 width=480 poster="video/posters/about_the_man.jpg"></video>
I've using this link as a reference (listing 1.2): https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6
It says that on iOS the poster image will be shown until the user initiates playback, but right now all I'm getting is a black video-sized screen with a big play button in the center. I've looked at other postings on this top (here and here) but neither solution has worked for me. The only thing that's a little bit unconventional about the site is that the video element is in an inline lightbox, so initially on pageload it's not visible, but I don't know why that would make a difference.
I had the exact same problem. I decided to try my code on other iPad's, and it worked fine. The poster image showed up.
After scratching my head for a bit, the solution was to hard reset the iPad and try again. After a reboot, my iPad displayed the poster image as it should.
Maybe it will work for you?
I found there is a limit to the amount of images you can load on an iPad
Here is what it says:
I hit a mobile Safari limitation recently when building an AJAX-y site
on the iPad. If you load a ton of images eventually mobile Safari cuts
you off and will display a [?] instead of the image. After doing some
tests it appears that this limit is around 6.5 MB. Here’s a test page
I made that attempts to load 20 500kb images. When opening this page
on an iPad, 7 of the images don’t appear, even though in Charles they
are returning 200 – success. I’m assuming this is similar to the way
autoplay is disabled for the video tag on iPad/iPhone. Apple probably
wants to make sure users don’t get overloaded with downloads when
browsing on 3G.
Anyhow, 6.5 MB is a hefty load and wouldn’t fare well on 3G, but for one reason or another you may want to work around this limitation. I found the easiest way to patch my code was to load the image into a canvas tag using drawImage(). The canvas tag appears to be immune to the limitation.
Here’s another test page using the canvas tag, all the images should load.