Forums

Hi everyone,

I’ve run into very strange problem which I couldn’t find a fix anywhere, so I decided to ask people who really know.

Basically I’am trying to achieve a full image website (cover page) I’am using background image cover and height of 100% (both html/body and a div of the image) basically everything works fine on the laptop, however when I try that website on iPhone safari acts weird and shows me only the image and if I add something after the image regardless where it will stretch image, but won’t add anything, it’s like everything is behind the image, however image shouldn’t move. I’am desperate I’ve tried to fix this issue for over 4 hours now and I haven’t found any working solution yet or why this happens at all. The way I see is that it acts like this because of height 100% in html, body. If I set height to any random (i.e. 500px) it seems to be working fine across both devices (phone and laptop), however it does not want to work when body and html is set to 100% height.

Link to the code pen: http://codepen.io/monkevicius/pen/apBmoq

Screenshot how it looks on desktop (the way it should): https://i.imgur.com/7j8FVa6.jpg

Screenshot how it looks on safari (iOS): https://i.imgur.com/rpocvcl.jpg

Please note that, after adding anything after the image on iOS the background image gets bigger you can scroll, why this happens though, I have no clue.

Appreciate any help. Thank you.

EDIT: I believe it’s solved, since there wasn’t any problem. The problem seems to be codepen itself, since it is displaying a webpage within iFrame somehow it gets messed up on iPhone on debug mode it seems to be working just fine, so it’s codepens issue rather than safari, that probably explains why I haven’t found any information regarding this issue. Any insights are welcome though. Thank you.