CSS weirdly breaks on some iPhones

Question

Main idea

I have a web page with custom css files for different screens. After a lot of searching and using responsive simulator testers that show no errors, some iPhone users complain about broken page style.

Code basics

Page has 2 custom CSS files for larger (>960px) and smaller(<=960px) screens.

I have this meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

This is my page to test

Test and results

On browser testing for smaller screens (even down to 260px width) show no problems. Also validated the CSS here.

This is how it looks for some people with new updated iPhone 6 browsers (Safari and Chrome have the same result).

All the other phones (as far as I know) don't have this issue.

Viewport seems to be fine. I did checked it on my phone. Don't think if there is any sort of issue — Anmol Sandal, Sep 14 '17 at 07:23
@AnmolSandal - I added screenshot from a customer. It looks absolutely unusable. — Mike B, Sep 14 '17 at 07:25

score 3 · Accepted Answer · answered Sep 21 '17 at 19:47

3

Relating to what others said about the 150 % width: there is some JavaScript setting that width in js_compressed.js... it's compressed so it's difficult to tell what the point of it is, but here's what it looks like pretty-printed in Chrome Devtools:

b() && ($("section.top").css("width", "150%"),
$("footer").css("width", "150%"));

Right below it there is some stuff related to FancyBox (this, I presume)... maybe could be related to that?

answered Sep 21 '17 at 19:47

klumme

608
3
8

This appears to be what is happening. The width is being applied as an inline style to only the header and footer. It appears to be coming from this portion. – SLL Sep 22 '17 at 04:49
1

Although u didn't give the biggest answer, it gave me exact pointer (to that f*** minimized js file) that was the cause. Thank You and take the bounty. :) – Mike B Sep 22 '17 at 09:37
Heyyy! Nice find. – Andrew Ice Sep 22 '17 at 15:00

score 2 · Answer 2 · answered Sep 20 '17 at 15:54

2

Your header (and possibly footer) are set to a width of 150%? That's what's breaking your page... It's creating a wider section, and therefore breaking the main section of your site.

Try removing the hard width of 150%; max-width should never be more than 100%.

answered Sep 20 '17 at 15:54

Andrew Ice

831
4
16

nope. that is not true. I have never set `max-width: 150%` to anything. Plus this design doesn't break on other pages (where it has the same H and F). And why does it break ONLY on iphones? – Mike B Sep 21 '17 at 06:46
1

Following up with what @Andrew Ice said, I checked your site in browser stack (Device: iPhone 6S, Safari Browser iOS9), and there are two inlined references in your site that are setting the width at 150%: the `
. Removing those inlined widths fixes the display problem in browser stack at least.. is there something in your code setting those widths by device?
– defteH Sep 21 '17 at 09:55
@MikelisBaltruks Sorry, I was at work and couldn't respond more, but also going with defteH here. Something in your application is setting the width to 150%. I'm not sure what, perhaps you didn't set it, but it was most clearly there in the CSS. ( Also was using browserstack. ) . I'll take a second look. give me a few. – Andrew Ice Sep 21 '17 at 13:57
@defteH Do you have them only on IPhone? It's weird - on chrome and in my real code I don't have such styling. – Mike B Sep 21 '17 at 16:00
@MikelisBaltruks - attaching a screenshot from browserstack: https://i.imgur.com/lucOOw0.jpg you can see the widths being applied inline to the elements, when turned off, the page fills the viewport correctly. I assume this is also what Andrew Ice was seeing as well. As mentioned above the emulation was an iPhone 6S using Safari on iOS9. EDIT: I've looked using Android and it does seem to work as intended - hopefully that helps you narrow the issue down. – defteH Sep 21 '17 at 16:05
1

Thanks for the help guys. You really helped. This time I'll give bounty to klumme's answer as he linked me to cause - minimized js file. Great appreciation though! – Mike B Sep 22 '17 at 09:35

score 1 · Answer 3 · answered Sep 20 '17 at 11:37

1

Since I don't have specific code snippet to detect your problem thus It's tough to identify which part of your code creating this issue so I am not able to answer your question specifically also I haven't got this thing on my devices but I have something for you that you might need to look

Check out this SO post check out the first answer specifically it has all the hacks that you need to know for iOS safari browser. With this I hope that my try will do the trick for you :)

answered Sep 20 '17 at 11:37

Mr. Pyramid

3,855
5
32
56

I know what to do when answer is acceptable. I took that link as an insult [kinda]. I don't have 20 rep. I know what to do :D – Mike B Sep 22 '17 at 09:31
ohk sorry will remove :D – Mr. Pyramid Sep 22 '17 at 09:32

score 1 · Answer 4 · edited Sep 20 '17 at 12:44

1

Please try

#top_block_wrapper, #secondary_block{
    display: block;
}

Instead of display: table-cell

edited Sep 20 '17 at 12:44

gmc

3,910
2
31
44

answered Sep 20 '17 at 12:38

vineet gupta

9
4

My `#top_block_wrapper` is `display: table`. Do you think adding one that is `display: table-row` in the middle will fix the issue? – Mike B Sep 20 '17 at 12:47
I need to check if you able to share snippet of that then it will be great – vineet gupta Sep 20 '17 at 14:58
Well - as it turned out - your solution was NOT the correct answer. But I'll leave the +1 for the good sport and trying! – Mike B Sep 22 '17 at 09:32

CSS weirdly breaks on some iPhones

Main idea

Code basics

Test and results

4 Answers4