0

I have been tasked with making a site responsive. In order to match the style of the desktop version I decided to use parallax scrolling. I am still learning a lot about web design, but I was careful to use examples that would work on mobile phones without any problems.

The scrolling effect works great, where I am running into issues is with the links on iPhone and Safari desktop. On the iPhone, it appears that the link for the last section is always on top, and on Safari on the desktop first sections link is always on top. In other browsers, Chrome, Firefox and Opera, the links work as they should.

I have tried several things like setting z-index, set each section to different viewport level, and much more, but I am stuck now. I wasn't sure if I should post all the code or just part of it and link to my codepen. Below is part of the html with the respective css.

<section class="hero" id="section-0">
    <figure></figure>
    <h2 class="hero__title">Tagline</h2>
    <div class='hero__container'>
        <div class='banner__brand'>
            <h1 class='banner__heading'><span>BRAND NAME </br>
                BRAND </span>&nbsp;&nbsp;of Location</h1>
        </div>
        <div class='banner__content'>
            <div class='paragraph u-center-text u-margin-bottom-large'>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nam aliquam sem et tortor. Nulla pellentesque dignissim enim sit amet venenatis. 
            </div>

            <div class='banner__subheading u-center-text u-margin-bottom-small'><a class='banner__link' href='https://images.unsplash.com/photo-1531185038189-41815d864f32?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1525&q=80'>Enter Site &rarr;</a></div>
            <div class='banner__subheading u-center-text u-margin-bottom-medium'>Scroll Down &or;</div>

        </div>
    </div>
</section>

And the css...

figure {
  display: flex;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.hero {
    position: relative;
    overflow: hidden;
    height: 100vh;
    -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
          clip-path: polygon(100% 0, 100% 100%, 0 100%, 0 0);
}
/* SPLASH PAGE / INTRO PAGE */
.hero:nth-child(1) figure {
  background-image: url("https://images.unsplash.com/photo-1531185038189-41815d864f32?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1525&q=80");
  background-size: cover;
  background-position: center center;
}
/* CHRISTMAS */
.hero:nth-child(2) figure { 
    background-image: url("https://images.unsplash.com/photo-1523358962111-f4baa9f94af8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80");
    background-size: cover;
    background-position: center center;
}
/* SUMMER */
.hero:nth-child(3) figure {
    background-image: url("https://images.unsplash.com/photo-1512990414788-d97cb4a25db3?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1603&q=80");
    background-size: cover;
    background-position: center center;
}
/* SCHEDULE */
.hero:nth-child(4) figure {
    background-image: url("https://images.unsplash.com/photo-1487529200833-5dcd537f115b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80");
    background-size: cover;
    background-position: center center;
}
/* PAGE 1 */
.hero:nth-child(5) figure {
    background-image: url("https://images.unsplash.com/photo-1456894332557-b03dc5cf60d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2689&q=80");
    background-size: cover;
    background-position: center center;
}
.
.
.

Here is my CodePen

I do have a backup plan to set a link area to one page, but would very much prefer to have individual links on each section.

halfer
  • 19,824
  • 17
  • 99
  • 186
coeyflyer
  • 13
  • 3

1 Answers1

0

If all browser works except Safari. You have to do following.

Change

Most important you missing in Viewport meta tags. You used <meta name="viewport" content="width=device-width, initial-scale=1.0">. But you have to use <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">. Benefit using shrink-to-fit=no adding this to the viewport meta tag restores pre-Safari 9.0 behaviour. Details in here.

*, 
*::after,
*::before {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

To

*, 
*:after,
*:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* border-box or content-box */
}

Details in MDN

Add

I seen you haven't use Normalize.css. Normalize.css is a small CSS file that provides better cross-browser consistency in the default styling of HTML elements. It’s a modern, HTML5-ready, alternative to the traditional CSS reset.

Remove

box-sizing: border-box from body. When you use *,*:after,*:before{box-sizing: border-box} you no need specific Box Model property again.

Rahul
  • 2,011
  • 3
  • 18
  • 31
  • Thank you for the information. I applied all the changes you recommended and I am still having the same issue. On my laptop, Safari browser only see's (overlapped) link from last
    , but all links on other browsers work just fine. On the iPhone, no matter which browser is being used, the link from last section is always on top. I am going to try and specify each section with its own class and see if that makes a difference. Thank you again, and I would appreciate any other suggestions.
     – coeyflyer Dec 21 '19 at 20:30
  • Looking at my code, I have 11 sections using
    tag with class='hero', using
    for background image. The last
    with class='content' and is using
    tag as a container for the content. My point is that all the sections with class='hero' are the ones where the link of the last section of class='hero' seems to be overlapping all the previous sections in Safari. But, if I put a link in the last section with class='content', the link works fine on that 'page', but does not become the 'overlaying' link to all previous pages. I hope that makes sense.
     – coeyflyer Dec 21 '19 at 21:13