I've made an animated list that has 3 infos in it, and it changes every 4 sec. Problem is that it works on every phone but not on iPhone 4, second and third child info just goes together. I've tried almost everything and can't get it to work on iPhone 4.

This is css for animation:

.valueprop-wrapper {
                width: 100%;
background-color: #f8f7f5; 
padding-bottom: 0px;
            }

            .valueprop-liste {
                margin: 0 auto;
                height: 25px;
                position: relative;
            }

            .valueprop-liste-item {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                opacity: 0;
                font-size: 12px;
                color: #33302d;
                line-height: 1.6px;
                -webkit-transition-duration: 1s;
                -moz-transition-duration: 1s;
                -o-transition-duration: 1s;
                transition-duration: 1s;
                padding: 6px 20px;
                text-align: center;
                -webkit-animation: valuepropListe 12s 0s infinite;
                -moz-animation: valuepropListe 12s 0s infinite;
                -o-animation: valuepropListe 12s 0s infinite;
                animation: valuepropListe 12s 0s infinite;
            }

            .valueprop-liste-item:nth-child(2) {
                -webkit-animation-delay: 4s;
                -moz-animation-delay: 4s;
                -o-animation-delay: 4s;
                animation-delay: 4s;
            }

            .valueprop-liste-item:nth-child(3) {
                -webkit-animation-delay: 8s;
                -moz-animation-delay: 8s;
                -o-animation-delay: 8s;
                animation-delay: 8s;
            }

            @-webkit-keyframes valuepropListe {
                17% { opacity: 1; z-index: 3; }
                25% { opacity: 1;}
                40% { opacity: 0; z-index: 1; }
            }

            @-moz-keyframes valuepropListe {
                17% { opacity: 1; z-index: 3; }
                25% { opacity: 1;}
                40% { opacity: 0; z-index: 1; }
            }

            @-o-keyframes valuepropListe {
                17% { opacity: 1; z-index: 3; }
                25% { opacity: 1;}
                40% { opacity: 0; z-index: 1; }
            }

            @keyframes valuepropListe {
                17% { opacity: 1; z-index: 3; }
                25% { opacity: 1;}
                40% { opacity: 0; z-index: 1; }
            }

This is code where I call the animations:

<div class="col-xs-15 col-sm-15 col-md-15 col-lg-15 mobile-view">
                            <hr class="rwd-bg-naht-grau" style="margin-bottom: 0px;" />
                            <div class="valueprop-wrapper">
                                <div class="valueprop-liste">
                                    <span class="valueprop-liste-item"><img src="<?=SHOP_DIR_WWW."/ALL/images/check.png"?>" height="14px" width="14px" /> <b><?=$sprachdatei["header"]["vorteil_1"]?></b></span>
                                    <span class="valueprop-liste-item"><img src="<?=SHOP_DIR_WWW."/ALL/images/check.png"?>" height="14px" width="14px" /> <b><?=$sprachdatei["header"]["vorteil_2"]?></b></span>
                                    <span class="valueprop-liste-item"><img src="<?=SHOP_DIR_WWW."/ALL/images/check.png"?>" height="14px" width="14px" /> <b><?=$sprachdatei["header"]["vorteil_3"]?></b></span>
                                </div>
                            </div>
                            <hr class="rwd-bg-naht-grau" style="margin-top: 0px;" />
                        </div>

Can anyone help with this? Is there a animation value just for iOS so iPhone 4 shows the correct placement?

0 Answers