Lenka Pitonakova
Lenka Pitonakova

Reputation: 1116

Safari 9 (in iOS9) ignores CSS settings

I am working on this web page: http://dev.mailagent.biz/cms/NEWS

It is responsive HTML that works fine in all browsers, all window sizes. It used to work fine on iPhones too, until iOS9 came to be. Now the whole site is broken. Extra margins (I am guessing) have been added, meaning all boxes appear to have a lot of white space. Below is a screenshot from my iPad.iPad screenshot

I set the viewport as

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />

I tried setting the margins to 0 and even to negative values, but the boxes don't move. I also tried removing any white spaces between div tags, with no change.

I am using a responsive css for all browsers: dev.mailagent.biz/cms/css/main_responsive.css Then attaching this one specifically for iOS9: http://dev.mailagent.biz/cms/css/iOS9.css

However, most of the styles are still ignored, especially to do with margins. E.g. the iOS9 stylesheet should actually align the whole site to the left (.centeredWrapper has margin:0 not margin:auto). I know that the iOS9.css IS attached for iPhones/iPads, as e.g. some margins and colours were successfully changed in the menu across the top compared to the desktop version.

Does anyone have any idea what's going on? How to I tell Safari to stop trying to be clever? Or how should I change my markup?

Upvotes: 6

Views: 3114

Answers (2)

Robert Went
Robert Went

Reputation: 3092

Try adding a shrink-to-fit to your viewport tag

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

Upvotes: 4

Dave 5000
Dave 5000

Reputation: 346

line 281 (or 98) in main_responsive seems to be the culprit:

.content ul, .content ol, :not(.content ul.slideshowUl) { margin: 0 0 10px 30px;}

I commented that out in the Safari inspector and the whole page went back to normal.

Upvotes: 2

Related Questions