0

I'm searching what is wrong in my code. I've used html5 doctype, with viewport meta tag and simple Html construction.

<!doctype html>
    <html>
        <head>
        <meta charset="utf-8">
        <title>Page title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">

A main content div some links and paragraphs. You can see all my html and css here. My Html (short version) :

<div class="main-content">
  <a href="">
    <img src="http://dummyimage.com/980x64/000/fff" alt="" />
  </a><!-- there many others-->
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae autem in repudiandae voluptas dolorem veritatis aliquam deserunt fuga tempore perferendis quaerat est hic deleniti porro commodi. Quisquam repudiandae rerum minus?</p>
  <a href="">
    <img src="http://dummyimage.com/980x74/000/fff" alt="" />
  </a>
</div>

Css :

html {
    font-size: 62.5%;
}

.main-content {
    -webkit-overflow-scrolling:touch;
    overflow:auto;
    margin: 0 auto;
    width: 100%;
}

a {
    display: block;
    text-decoration: none;
}

img {
    display: block;
    margin: 0;
    padding: 0;
    max-width: 100%;
}

p {
    font-family: arial, sans-serif;
    font-size: 13px;
    font-size:1.3rem;
    color:#7b7b7b;
    margin: 10px;
    text-align:justify;
}

@media (min-width: 48em) {

    p {
        font-size: 14px;
        font-size: 1.4rem;
    }
}

@media (min-width: 75em) {
    .main-table { width: 980px; }

    p {
        font-size: 12px;
        font-size: 1.2rem;
    }
}

My problem is that my page works well everywhere other than IOS devices (iphone 5 and ipad mini tested). Content of a page is cut and don't scroll.

AlexDom
  • 701
  • 4
  • 14
  • I can't test it, since I don't have an iPhone, but the only thing that I see in your code that *might* cause the problem is `-webkit-overflow-scrolling:touch;`. What happens when you delete that? – GreyRoofPigeon Aug 13 '14 at 14:16
  • Thank's Ted but i have this problem without this attribute, i try this option but it change nothining. – AlexDom Aug 13 '14 at 14:18
  • 1
    I've find an answer my page was in a iframe so i've found the solution http://stackoverflow.com/questions/4599153/iframes-and-the-safari-on-the-ipad-how-can-the-user-scroll-the-content/8214891#8214891 – AlexDom Aug 13 '14 at 14:35

0 Answers0