I currently develop a website in mobile safari. I am stuck on a problem that the text shadow behavior in iOS5 and iOS4 is completely different such as the blue effect. And the result of text shadow position is also different between iPhone 3G (non-retina) with iOS5 and iPhone 4 (retina) with iOS5. CSS code is "text-shadow: 0 1px 1px #ffffff". Can someone tell me how to fix this issue?
I've just come across this - I had an App rejected from Apple due to the difference with the way Io5 displays text-shadows. Text shadows which previously looked fine now appear to display badly in Io5, creating blurry textm and as a result the app failed Apples Human Interface Guidelines.
It would appear to suggest that text shadows, at least ones on dark text on a light background, can no longer be used on iPhone apps.
As thirtydot suggested, there is nothing you can do about this. This is the way safari renders your html and css.
The only thing you could and should do is file a bug to apple. Go to http://developer.apple.com and check where to file a bug about this.
Related
All the app icons in my .NET MAUI app seem to work correctly, except for this little guy on iOS. You see this icon when you swipe up to see all the open apps.
I guess, somehow I'm missing this but I uploaded all the icons with different sizes Apple requires for iOS apps. Which one is this icon and how do I make sure I'm giving Apple my app's icon for this particular size so it doesn't default to the .NET icon?
Yes,this is often the case when you are using images that are not formatted correctly or are very complex. And I've had similar problems before.
Vector graphics are highly recommended in ios.
In some cases, iPads display a small bar on the side of my iPhone app. I don't know what it is doing there or why. Been looking around for quite some time, but I can't find any information on the subject. May be I don't know what I'm looking for.
The problem is best described through a screenshot, here's a partial:
The grey bar is the problem. It appears out of nowhere and blocks a small part of the GUI. This screenshot is made with iOS 7, I have also seen it with iOS 6. On iOS 6, the bar is in a darker color, somewhat blackish.
Anyone familiar with this kind of issue?
I am new to UI design, however a client wants an app ready for both iPhone 4s & 5.
I understand the iPhone 5 will create two bars if the image is not long enough. Many people said coding it at #2x will solve the problem. But I'm not sure exactly what that means.
Do I need to design two versions? What happens if I design only for iPhone 5? Will iPhone 4S users see a squished screen?
Thanks.
First, in a couple of months you'll have to support the iPhone 5's screen size. Apple have announced that it'll be a requirement soon.
Adding a Default.png of the right size is enough to enable an app to support the new screen size but is likely not enough. You'll also need to make sure that all your views resize to fill the screen. There's the old "springs and struts" method and the newer "constraints." There are tutorials you can search for -- Stackoverflow is not a good place for that kind of thing. You'll also need to update any images.
In short, try it in the Simulator and see what happens.
Using #2x is referring to whether or not the image asset is being displayed on a 'retina' screen. For example, if you had a 50x50 pixel image, the 'retina' (#2x) version would be 100x100. This is because 1pt (point) is equal to 2px (pixel) on a retina screen.
There are a variety of ways you can determine is it is an iPhone5 or iPhone4.
In the viewDidLoad, you could check the self.view.frame.size.height to determine which background image to load based on the height of the screen. This would require you to have two different versions of the assets (not including #2x versions), i.e. bg_iphone5.png & bg_iphone4.png.
There are other ways to accomplish this, and people have explained it better than I have here - search StackOverflow and you will surely find what you're looking for.
What happens if I design only for iPhone 5? Will iPhone 4S users see a squished screen?
Don't do this. Design for both.
What causes the flash of white to the right of a responsive design when changing orientation from portrait to landscape on the iPhone with iOS 6?
Try it on Safari for iOS 6:
Websites like this don't do it: http://html5boilerplate.com
But this one does: http://www.initializr.com
Something to do with re-processing (CPU lag) to fit a wider screen?
It doesn't happen in Chrome for iOS6...
For example, I just removed all img from my own testing site and set the background of <body>, <html> etc. to non-white, but it still happens. This seems to happen with a lot of different websites out there, but others are completely immune to it...
Could it be a problem with someone on the website, or an iOS Safari bug?
Thats because of the elements in the header of http://www.initializr.com/ which (dis)appear when changing orientation. It forces the header to resize and the elements below are pushed down. This causes a repaint of the DOM, that causes the short white flash on iOs.
Here's a weird one. I'm developing a responsive site here:
http://74.209.178.54:3000/index.html
There are three pages built so far: the home page, the "Why" page, and the "Pricing" page. The Home and Why pages are just fine on my iPhone 4. The "Pricing" page is really blurry. And I don't just mean the images are blurry - absolutely everything is blurry: text, borders, backgrounds...
Has anyone seen this before? Do you know what's happening?
This code in your CSS is causing the problem :-
#logos, #seen {
border: 1px solid #bbbbbb;
(around line 909 or 751 according to the comments.)
As you can see that the #logos is being used on the Pricing Page & the border given to it is on all of the sides - The page width is increased by 2px. Then the iPhone zooms in on the whole page when opened and blurry page stuff happens.
I'm pretty sure you know what to do but here goes :-
#logos, #seen {
border-top: 1px solid #bbbbbb;
border-bottom: 1px solid #bbbbbb;
I haven't actually tested this on a retina display iPhone but it should work.
The problem is the retina display of the iPhone 4. I had a similar problem when loading 2 buttons, they looked blurry (much more than your website) on the iPhone 4 but looked great on my 3gs (as well as your page). I have no idea what do you have to do to support the iPhone 4 retina display on your website, but i'll explain how works when programming in Xcode:
If you want to support retina and non-retina devices, you must have 2 versions of the same image. I recommend you to create first the retina image because it's easier to reduce (search on the Mac App Store for "resizer"). Well, the retina image must be named as that: yourimagename#2x.format. Your non-retina image, like that: yourimagename.format. Then, add both images on your project and when you want to load it, load the non-retina version. If the app is running on a retina device, the program will load the retina images.
That blurry effect is caused because the text is rendered in retina, and the images not. It's not a problem of images, it's just a problem of the resolution of the image. The retina images is 2x the size (width and high) the non-retina image, so the non-retina is the half of the retina. At first can seem a bit confusing, but you'll see that it isn't at all.
Hope I helped you. If you need some more help just ask!
The problem mysteriously went away - I have no idea what actually happened. The people who answered the question saw the site when the problem was gone.