Web Styles Don't Work On iOS 8 iPad?

[Eric_Gibbon]

I’m developing a Web App specifically for iPad users. The iPads will act as smart tills for a store and will be used by the customer-facing staff. I designed a flat UI specifically with simple, clear and large buttons for the staff to press. The UI looks great in the IDE and when running in Safari on the desktop Mac I use for testing. But when the app runs on an iPad, the buttons look completely different.

Please see the image. The buttons are designed as rectangles with a solid colour background, on iPad they show with rounded ends and a gradient colour that is not the same colour as the design.

So web styles don’t work on an iOS 8 iPad? Am I missing something? I’ve looked around the Forum but have not found anything. Can anyone please advise?

[Eric_Gibbon]

Also, why the forum is showing that image upside down is a complete mystery.

[Albin_Kiland]

@162390:@Eric Gibbon

Also, why the forum is showing that image upside down is a complete mystery.

The forum does not read the images meta-tag for rotation that says you shot the image with the device rotated 180 degrees

[Michel_Bujardet]

@162389:@Eric Gibbon

I’m developing a Web App specifically for iPad users. The iPads will act as smart tills for a store and will be used by the customer-facing staff. I designed a flat UI specifically with simple, clear and large buttons for the staff to press. The UI looks great in the IDE and when running in Safari on the desktop Mac I use for testing. But when the app runs on an iPad, the buttons look completely different.

I just checked. Apparently, neither Chrome on Mac or Safari on iPad honor web styles. It is worse on iPad but Chrome iOS does have rounded corners when I specifically designed it without.

You probably want to replace buttons by labels and use their MouseDown as Action. I noticed that they even get greyed when tapped.

Or use a canvas for more elaborate features.

[Ian_Jones]

Make sure the style you’re using for the button has a gradient background, even if both colours are the same to get a flat look, this will force the button to be drawn as you want it rather than take on defaults from the browser (including Mobile Safari).

When you do this the borders and corners you’ve set will also be honoured.

[Eric_Gibbon]

@Ian Jones you are a star! That’s a fantastic tip, setting a gradient background and setting the points to be the same colour has resolved this issue for me. Thank you very much.

[Greg_O_Lone]

Yes, on iOS 8, you have to modify the style by a certain amount to break out of the built in style.

[Michel_Bujardet]

@162575:@Greg O'Lone

Yes, on iOS 8, you have to modify the style by a certain amount to break out of the built in style.

The problem also manifested in Chrome OS X where buttons set with no rounded corners style still had rounded corners in the running project. But Ian workaround works there too.