I have come across an unusual problem related to animated gifs on both the ipad and iphone on both safari and chrome and have been unable to find any posts with a similar problem.
Through a series of tests I have found that if the animated gif is over 480 pixels wide it will not play but stay on the first frame. You can view a test page here: http://www.echo3.com.au/test/animation/. They all play fine on desktop computer in all browsers.
Has anyone else had this problem as I am baffled by it?
Related
I have built responsive website which works great on all devices except iOS.
On iOS devices, my background images get blurry.
Here is link to my website. http://www.idynxschool.com/vesco/
You can view it on iPhone and you will find blurry images. Is this something to do retina ready images?
Any solution will be really appreciated.
Thanks
In Safari on iOS, there is a known limitation when displaying large PNG and GIF images. The issue is triggered by the overall number of pixels in the image, so even if an image is narrow, you can experience blurriness if the image is tall enough.
This affects both the iPad and iPhone and affects all models of device. However, the exact image size that triggers the issue varies from iPhone to iPad and between models. For example, if you’re creating an image for iPhone 6 Plus that is 1080px wide, then the image can be up to ~4800px tall before blurriness would occur.
If you use JPG instead of PNG or GIF, then you may see less blurriness since the limit is increased for JPG images. For PNG or GIF images, however, the only way to work around this issue at current is to reduce the dimensions of the image until they’re below the limit that causes the issue.
Answer found: https://support.invisionapp.com/hc/en-us/articles/204660949-Why-are-my-images-in-iOS-blurry-
I don't have a iPhone 6 Plus.
But I was pointed out the problem with the web site that I'm involved.
It was boundary lines displayed in the repeating background image in the iPhone 6 Plus.
The background image is png or gif.
Although the report of the similar problem is not found on a web, somebody else encountered this problem?
Is there any information whether it is a bug or not?
edit:
There is no problem in iPhone 6.
The size of the background image of CSS, I have specified in the half of the original.
I have an embedded youtube video on a web page. On the desktop it works fine. However, on an ipad (running iOS7) the video quality is rather poor, probably 480p. Inside the iframe it looks fine, but when you make the video full screen it is very noticeable. I have tried using hd=1&vq=hd720 in the querystring and using cueVideoById with a suggested quality of 'hd720' but neither worked. Are there any work arounds either to get higher resolution on the ipad when embedded youtube videos are made fullscreen, or to force higher resolution for embedded youtube videos on the ipad?
I found a workaround that works, although it is hardly elegant.
Basically, I create the iframe with a dimensions large enough to get 720p quality. (Such as making the iframe 720x440 pixels.) And then, I use CSS transforms to scale the iframe back down to the size I want. The CSS looks something like:
-webkit-transform-origin: left top;
-webkit-transform: scale(0.5);
Where 0.5 could be replaced with whatever scale you had to increase the size of the iframe by.
The main downside to this from the user's perspective is that the video controls are scaled down. However, in full screen mode the controls are the normal size, and the user can pinch out to full screen, so for my team at least the trade-off in increased video quality was worth it.
We are using Canvas to resize images on Iphone/IPAD before uploading to our server.
On IPhone 4S and 5, when photos are taken in landscape mode with FRONT camera, the resizing works fine. When taken in portrait mode, the images are squashed by about 1/4. But when taken with rear camera, all images, both landscape and portrait, are squashed by about 7/8, leaving just a thin belt to view.
On IPAD and IPOD, it is the same for front and rear camera: landscape images are fine, but portrait images are squashed by 1/4.
We tried several different resizing algorithms, but ended up with the same results.
Any ideas how to solve this problem?
I found a working solution for this. gokercebeci posted a great jQuery plugin on github. It is working as expected for my app!
Found a solution that works for me at HTML5 Canvas drawImage ratio bug iOS . The solution is accredited to stomita and posted and edited (I believe) by tombre and matt burns on 14 Jan 2014.
I have a SVG sprite I am loading into both my regular and mobile sites. The SVG is 74kb.
When loaded in the normal site on a New iPad(v3) iOS 5.1(9B176) there are zero scrolling and zooming issues whatsoever. There a 24 instances where a portion of the sprite is displayed.
When I load the same SVG into the mobile site on a iPhone 4 iOS 5.1(9B176) I get a significant lag in scrolling up and down when I lift my finger. If I leave my finger on the screen there are no scroll issues. Ther are only 16 instances where a portion of the sprite is displayed. If I replace the SVG with a #2x PNG (152kb) I have no scrolling issues. On the mobile site there is no zooming, since the viewport is set to user-scalable=0.
I was wondering what the issue could be and why this might be happening. Any insight would be greatly appreciated.
Thank you.
As soon as I add CSS transform or blackface-visibility it starts to flicker and lag at the end of zooming/scrolling when it redraws. So try to remove any CSS animation you have on the page and see if it has any impact.