CODEWITHSUNDEEP
ioscsscss-animations
Adam Bell
Adam Bell

Reputation: 1045

CSS3 fadeIn transistion not functioning on iOS devices

Trying to get the following, which seems to work on the desktop, to also work on mobile devices, but all I see is white. So the fade in never occurs. Here's my HTML:

<a href="https://thecleverroot.com/meet-your-makers-hudson-valley-foie-gras/" title="Folio: Meet Your Makers" class="feature-link">
<section class="feature fade-in one" style="background: linear-gradient( rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.35) ), url(https://thecleverroot.com/wp-content/uploads/header-hudson-valley-foie-gras.jpg ) no-repeat top center!important; background-size: cover!important;">
<section class="feature-caption"><p class="category-link">Growers</p><h2>Folio: Meet Your Makers </h2><p>Jenny Chamberlain, Chef of Product Development for Hudson Valley Foie Gras, Ferndale, NY</p><p class="read-more">Read</p></section></section>
</a>

And this is the CSS:

.fade-in.one { -webkit-animation-delay: 1.25s; -moz-animation-delay: 1.25s; -o-animation-delay: 1.25s; animation-delay: 1.25s; }
.fade-in { opacity: 0; -webkit-animation: 1s ease-in 0s normal forwards 1 running fadeIn; -moz-animation: 1s ease-in 0s normal forwards 1 running fadeIn; -o-animation: 1s ease-in 0s normal forwards 1 running fadeIn; animation: 1s ease-in 0s normal forwards 1 running fadeIn; }
 body.home a.feature-link { text-decoration: none; }
.feature-caption h2 { font-size: 64px; line-height: .75em; margin: .25em 0; }
.category-link {
    background: #000;
    border-radius: 14px;
    display: inline-block;
    margin: 0;
    padding: 0 20px;
    min-width: 90px;
    height: 31px;
    line-height: 31px;
    color: #FFF;
    font-size: 14px;
    text-align: center;
    font-weight: 400;
    text-transform: uppercase;
}

CodePen: http://codepen.io/anon/pen/ojZXNy

Upvotes: 1

Views: 865

Answers (1)

joern
joern

Reputation: 27620

I tried your code on CodePen but it does not work on desktop either (I tested the latest Chrome and Safari on Mac OS Yosemite).

If you want to fade in the content of your HTML page after it is being loaded you can do it like this:

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            .faded-out {
                opacity: 0;
            }
            .fade-in {
                opacity: 1;
                transition: opacity 1s ease-in-out;
                -moz-transition: opacity 1s ease-in-out;
                -webkit-transition: opacity 1s ease-in-out;
            }
            #fadeInContainer {
                background: url(https://thecleverroot.com/wp-content/uploads/header-hudson-valley-foie-gras.jpg);
                padding: 60px;
            }
        </style>
        <script type="text/javascript">
            window.onload = function () {
                document.getElementById("fadeInContainer1").className = "fade-in";
                document.getElementById("fadeInContainer2").className = "fade-in"
            }
        </script>
    </head>
    <body>
        <a href="https://thecleverroot.com/meet-your-makers-hudson-valley-foie-gras/" title="Folio: Meet Your Makers" class="feature-link">
            <section id="fadeInContainer1" class="faded-out">
                <h1>Content 1</h1>
            </section>
            <section id="fadeInContainer2" class="faded-out">
                <h1>Content2</h1>
            </section>
        </a>
    </body>
</html>

There are 2 CSS classes: .faded-out (hides the content while the page is being loaded) and fade-in (fades in the content).

Initially the content has the faded-out class. When the page is loaded we switch the CSS class to fade-in to fade in the content. That is done via javascript.

EDIT: I fade in two sections now, as requested in your comment

Upvotes: 1

Related Questions