I'm using an svg background image on a simple anchor element and need the graphic positioned to the right of the element.
It works in most browsers, except on iPhone (fine on iPad).
I've set up two codepens - identical apart from using a gif or an svg image. The gif is correctly positioned to the right, but the svg isn't.
gif - positioned correctly on iPhone - http://codepen.io/johnholtripley/pen/yLDwF
svg - incorrectly positioned on iPhone - http://codepen.io/johnholtripley/pen/maCkb
I can't see any other reports of this issue - is this a known issue?
Just seen the footnote on caniuse.com's entry for svg - "Partial support in iOS Safari and older Safari versions refers to failing to support tiling or the background-position property." - http://caniuse.com/svg-css
Any workarounds available though?
You haven't stated what "type" if iPhone you are using. If you are using one of the older iPhone's, some content may not appear to be correct because the browser is not up to date (as the updates for that device have stopped).
When I was developing a website a while back, I looked it up on my iPod Touch 2 and the content appeared distorted; whereas when I looked up the same content on my newer device (5th gen), the content appeared correctly.
Related
I'm trying to build a portfolio website, wich works on desktop and mobile devices.
This is what i have right now: http://i305098.iris.fhict.nl/Portfolio/
The problem is on the image in the showcase section ,the image doesn't display how it should be doing. It works fine on all browsers and even in the GC emulator of iphone 5 but when I show the page on my Iphone 5 the image totally ignores any width or height given in the CSS.
You should try using PHP constraints for the image so that it resizes itself nicely, (Are you using wordpress or ?)
That would be helpful, Thanks.
canvasOn a web page in a mobile web application I am developing, I have a fileinput control that is used to take a picture with a mobile device camera. The image from the camera is then drawn onto an HTML5 canvas object on the same page.
The issue I am having is that if the web application is run on an iPhone 5 running iOS 7 (in the Safari web browser), the image appears extremely distorted. Specifically, the image appears to be vertically squished when drawn on the canvas. If the same web application is run on an Android device, no distortion is seen.
In previous versions of iOS and on iOS devices prior to iPhone 5, some vertical squishing was seen (although not as bad as this), and a jquery plugin named megapixel-image.js could be used to correct the vertical squishing. This tool unfortunately is not compatible with iOS 7.
Is this related to image subsampling in Safari or something else? What can be done to correct this? I obviously cannot have my users see this distorted image. Any mobile web app developer who wants to use the camera and HTML5 canvas is going to run into this, so a solution is mandatory.
megapixel-image.js does handle this correctly. I found I was passing some parameters to the plugin incorrectly, causing it not to work. My thanks to Ray Nicholus for his assistance with this issue.
Our current app doesn't work on the ipad 3 with retina display running ios7 beta 6.
The html page served between the is too big on the ipad, ie. ignores 100% width - therefore the user needs to scrolls around the page to see all the buttons and functionality rather than it fitting on one page.
This doesn't happen on the iphone 4 running ios7 (other models not checked) and it doesn't matter whether or not x2 is selected for the ipad zoom.
Has any one come across this issue, is this a media query fix or a iOs7 bug?
Just updating my answer based on what we've found last week and implemented for our app as a solution.
Although not entirely clear I believe the Question in hand above has to do with an HTML application running in webview vs. a web application in safari. Because 2x compatibility mode is being referenced in the question.
Issue:
Is not due to media Query but the viewport width=device-width is returning 768 instead of the 320 it returned in <= iOS6.x, when running an iPhone application in 'Compatibility Mode' on an iPad.
Fixing on the remote page
The best solution is to edit the viewport on the remote page by modifying the value of the 'width' attribute or removing it all together.
Fixing natively:
Few options...
1) Build the app as 'Universal'
2) I found somewhat passable results by executing javascript on webViewDidFinishLoad to decrease the scale
self.webView stringByEvaluatingJavaScriptFromString:#"$('meta[name=viewport]').attr('content','width=device-width, initial-scale=.41 user-scalable=no');"];
If you happen to be using PhoneGap/Cordova, issue was also identified and filed here: https://issues.apache.org/jira/browse/CB-4323
This should help:
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
iOS7 has been said to be the buggiest Safari version since 1.0.
There is no way to have a truly fullscreen experience on your website with iOS7. This was one of the wonderful aspects of iOS 6, and losing it is a major step backwards.
I hope that Apple comes to it's senses...
While testing my website's mobile version on several devices, I noticed a very strange behaviour.
I have a scrollable content div with overflow: auto, and this works properly on all tested devices, except iPhone 4 on Safari. Other browsers and devices display it correctly, even iPhone 5 Safari.
On iPhone 4 Safari, when you scroll to the end of the content, a lot of extra whitespace appears at the bottom (looks like 100-200% extra height) and the text disappears when scrolling. This doesn't happen on any other devices in Safari, nor does it happen in other browsers on iPhone 4.
Has anyone ever heard of such a phenomenon before? I have absolutely no clue what causes this behaviour or how to fix it.
Since I only have access to a limited amount of devices for testing, I may be overlooking other devices/browsers where this issue also occurs. If you have a mobile device and want to test it as well, the live site is here: Live site. On the mobile homepage, click one of the logo's to expand the content, then try scrolling down. Please post your results in a comment.
How it looks on iPhone 5 Safari when scrolled down (no issue): Image
How it looks on iPhone 4 Safari when scrolled down (issue): Image
I would venture to guess that you are exposing a layout quirk in Mobile Safari because of the way that you are hiding/showing the contents of each .company element. Each time that you change the display property of an element, the browser must perform a reflow. Reflows (also called layouts) are prohibitively expense on lower powered mobile devices. This would likely explain why you are only seeing the issue on an iPhone 4.
I myself tested on an iPhone 4 and iPhone 3GS, both running iOS 6.1.3, and I was able to reproduce the issue only when I expanded the top or bottom .company elements, but not the middle one. Perhaps this is because the middle .company element contains the fewer children, meaning fewer layout calculations are needed.
Instead of applying display: block; and display: none; to each of the children in the .company element, I would strongly recommend you simplify your javascript to instead toggle the display property on a single container element. By doing this, you force the browser to perform a reflow calculation only once, rather than for each element that you are individually changing the display property.
P.S.: The "other" browsers on an iPhone (i.e. Chrome and Opera) use UIWebviews. UIWebviews use a modified version of the Nitro Javascript engine (the Safari version has JIT compilation enabled). This subtle difference might explain why the issue can only be reproduced in Safari.
After playing around with your live site a bit using the Safari 6 remote debugging feature, I found a solutions that is working for me.
Add -webkit-overflow-scrolling: touch; to the .container element (the one that is the child of your #companies element).
After thinking about it some more, I remembered having issues with scrolling making content disappear randomly and adjusting the overflow-scrolling property fixed it for me.
Apple recommends cropping out the status bar from screenshots submitted to the app store. Doing this manually in Preview is a very tedious and error-prone process.
Do any developers have any best-practices recommendations or automated techniques for speeding up this process? The goal would be to take as input iPad and/or iPhone screenshots, and output them with the toolbar cropped off. We need to support both portrait and landscape orientation, and Retina-resolution iPhone screens.
I've found a few utilities online that purport to help with this, but the ones I have found seem to fail on Retina-display resolution screens. And another that works via the iOS Simulator requires a 1920x1080 resolution monitor to process iPad screenshots - making it useless for non-17" laptop-based developers.
Any other recommendations for taking good screenshots for the AppStore? I know (based on my searching) that there are a lot of other developers who would be interested in a quicker workflow to handle this.
Bonus points for being able to bulk-process an entire directory.
I developed a free App, Status Barred which is on the Mac App Store. It crops your iOS screenshots from iPhone, iPad, portrait, landscape, normal & retina display.
I used the ImageMagick command line tools to batch crop all the Screenshot png files, but haven't figured out how to not use auto assigned output filenames.
convert Screenshot*.png -crop 640x920+0+40 920Screenshot.png
Here are two ways, assuming you mean status bar and not toolbar (which you probably shouldn't crop out of the screenshots).
If you have photoshop, just change the canvas size by subtracting 20 (low-res) or 40 (retina) and anchoring the bottom of the image. This works perfectly.
It's also easy in iPhoto using the Edit/Crop feature. Set the dimensions to the correct size (Portrait: 320x460 or 640x920 and Landscape: 480x300 or 960x600) and move the crop screen to the bottom of the image. This does it perfectly as well.
After much searching, the easiest tool I have found is the iOS Simulator Cropper. It does a great job of handling different resolutions and orientations, and it is painless to use. No need to muck around with Photoshop or other slow / cumbersome tools.
Link: http://www.curioustimes.de/iphonesimulatorcropper/index.html
The developer reports that they have enhanced the iOS Simulator Cropper to bulk process screenshots taken on device as well as via the Simulator. I haven't tried this yet since the update, but if it works well this will be the perfect solution.
I have also found a very useful tool in the Mac App store called "Status Barred" that also very simply crops the status bar out of any images handed to it.
How about just using Preview? Command+A to select all, drag the selection down to 920px then Tools => Crop.