Mobile safari ignoring z-index

Try clicking one of the thumbnails here: http://henrybuilt.com/questions/

On a computer it works as desired (the text overlay is displayed on top of the first image in the slide set and then goes away when next or previous is clicked). On iPad or iPhone in both safari and chrome, the text overlay appears for a second and then gets covered by my background image slide div once it loads and I cannot make my overlay (.slide_view .title) appear on top of the background div.

The specific css:

        .slide_view .title{
            display: none;
            position: absolute;
            top:0;
            left:0;
            background-color: white;
            width: 100%;
            height: 100%;
            z-index: -3
        }
        #backstretch{
            z-index: -3;
        }

The full doc:

<?php

$slides = array(
    array("Why talk with us",     "whytalk",       6),
    array("Who we are",           "who",           1),
    array("Notable projects",     "notable",       0),
    array("Products",             "products",      0),
    array("Unique options",       "unique",        11),
    array("Kitchens",             "kitchens",      0),
    array("Whole House",          "whole",         0),
    array("Furniture",            "furniture",     4),
    array("Opencase",             "opencase",      0),
    array("What is a system",     "system",        5),
    array("HB vs Custom",         "vscustom",      0),
    array("HB vs Euro system",    "vseuro",        0),
    array("Design Process",       "design",        0),
    array("Making it",            "making",        0),
    array("Installation",         "installation",  0),
    array("Pricing",              "pricing",       0),
    array("Materials",            "materials",     0),
    array("High functions",       "highfunctions", 0),
    array("Craft quality",        "craft",         0),
    array("Press kit",            "press",         0),
    array("Working remotely",     "working",       0),
    array("Client site",          "client",        0)
);

?>
<!DOCTYPE html>
<html>
    <head>
        <style>
            body{
                margin: 0;
                padding: 0;
                color: #000;
                font-size: 62.5%;
            }
            body, input, textarea, select{
                font-family:"HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
            }
            .wrapper{
                max-width: 1000px;
                margin: auto;
                padding: 2%;
            }
            .header{
                font-size: 3em;
                margin-bottom: 2%;
                padding: 2% 0%;
            }
            .thumb_wrapper{
                float: left;
                width: 17%;
                margin-right: 3%;
                margin-bottom: 2%;
            }
            .thumb_wrapper:hover{
                cursor: pointer;
                opacity: 0.5;
            }
            .thumb_wrapper img{
                width: 100%;
                margin-bottom: 1%;
            }
            .thumb_wrapper .caption{
                text-transform: uppercase;
                opacity: 0.8;
                font-size: 1em;
                margin: 2% 2%;
            }
            .slide_view{
                display: none;
            }
            .slide_view .nav_bar{
                width: 100%;
                height: 10%;
                background-color: rgba(0, 0, 0, 1);
                position: absolute;
                bottom: 0;
                left: 0;
            }
            .slide_view .title{
                display: none;
                position: absolute;
                top:0;
                left:0;
                background-color: white;
                width: 100%;
                height: 100%;
                z-index: -3
            }
            .slide_view .text{
                position: absolute;
                top:50%;
                margin-top: -1em;
                font-size: 4em;
                color: black;
                width: 100%;
                text-align: center;
                text-transform: uppercase;
            }
            #backstretch{
                z-index: -3;
            }
            .caption{
            }
            .controls{
                float: right;
                margin-right: 3%;
                display: block;
                height: 100%;
                width: 20%;
            }
            .prev, .next {
                height: 8%;
                padding: 10px;
                border-radius: 5px;
                background: rgba(0,0,0,.5);
                position: absolute;
                top: 50%;
                margin-top: -50px;
                cursor: pointer;
                z-index: 3;
            }
            .prev:hover, .next:hover, .back:hover {
                opacity: 0.5;
                cursor: pointer;
            }
            .next{
                right: 5%;
            }
            .prev{
                left: 5%;
            }
            .back{
                float: left;
                display: block;
                height: 100%;
            }
            .back img{
                height: 90%;
                margin-top: 5%;
                margin-left: 50%;
                margin-right: 50%;
                display: block;
            }
            .overlay{
                display: none;
                position: absolute;
                top:0;
                left:0;
                background-color: black;
                width: 100%;
                height: 100%;
            }
            .image_caption{
                text-transform: uppercase;
                margin-left: 10%;
                padding-top: 1%;
                float: left;
                font-size: 1em;
                color: #fff;
            }
            .relative{
                width: 100%;
                height: 100%;
                position: relative;
            }
        </style>
        <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
        <script src="jquery.backstretch.min.js"></script>
        <script>
            var showing_title = false;
            var showing_title_for_first_time = false;

            var slides = [
            <?php 
            foreach($slides as $slide){
                echo "
                ['".$slide[0]."', '".$slide[1]."', ".$slide[2]."],";
            }
            ?>

                ["", "", 0]
            ];

            var current_group;
            var current_index;
            var transition_length = 500; //in ms

            $(document).ready(function(){
                var image_width = $(".thumb_wrapper .image_wrapper").width();
                $(".thumb_wrapper .image_wrapper").height(image_width*.75);

                $(".thumb_wrapper").click(function(){
                    var t = this;
                    var group = $(t).attr("group");

                    slideView();

                    var prefix = slides[group][1];
                    var index = 0;

                    current_group = group;
                    current_index = index;
                    setSlide(prefix, index);

                    showing_title = true;
                    showTitleForGroup(group);

                });

                $(".next").click(function(){
                    next();
                });

                $(".prev").click(function(){
                    prev();
                });

                $(".exit").click(function(){
                    thumbView();
                });
            });

            function slideView(){
                setTimeout(function(){
                    $(".thumb_view").hide();
                    $(".slide_view").show();
                }, transition_length);

                showing_title_for_first_time = true;
            }

            function thumbView(){
                setTimeout(function(){
                    $.backstretch("destroy");
                    $(".slide_view").hide();
                    $(".thumb_view").show();
                }, transition_length);
                transition();
            }

            function showTitleForGroup(group){
                showing_title = true;
                transition();
                setTimeout(function(){
                    $(".title").show();
                    $(".title .text").html(slides[group][0]);
                }, transition_length);
            }

            function hideTitle(){
                showing_title = false;

                transition();
                setTimeout(function(){
                    $(".slide_view .title").hide();
                }, transition_length);
            }

            function transition(){
                $(".overlay").fadeIn(transition_length, function(){
                    $(".overlay").fadeOut(transition_length);
                });
            }

            function setSlide(prefix, index){
                transition();
                setTimeout(function(){
                    $.backstretch("images/"+prefix+"_"+index+".jpg");
                    if(showing_title){
                        $("#backstretch").zIndex(-3);
                    }
                }, transition_length);
            }

            function next(){
                if(showing_title){
                    hideTitle();
                }else{
                    var group_size = slides[current_group][2];
                    var groups = slides.length;

                    var index = current_index + 1;
                    var group = current_group;

                    if(index >= group_size){

                        index = 0;
                        group = parseInt(current_group) + 1;

                        if(slides[group][0] == ""){
                            group = 0;
                        }

                        showTitleForGroup(group);
                    }

                    var prefix = slides[group][1];

                    current_index = index;
                    current_group = group;

                    setSlide(prefix, index);
                }
            }

            function prev(){
                if(showing_title && !showing_title_for_first_time){
                    hideTitle();
                }else{

                    var index = current_index - 1;
                    var group = current_group;

                    if(current_index == 0){
                        group = current_group - 1;

                        if(group == -1){
                            group = slides.length - 2;
                        }

                        index = slides[group][2] - 1;

                        if(!showing_title_for_first_time){
                            showTitleForGroup(current_group);
                        }
                    }

                    if(showing_title_for_first_time){
                        hideTitle();
                        showing_title_for_first_time = false;
                    }

                    var prefix = slides[group][1];

                    current_index = index;
                    current_group = group;

                    setSlide(prefix, index);
                }
            }
        </script>
    </head>
    <body>
        <div class="wrapper">
            <div class="thumb_view">
                <div class="header">
                    henrybuilt
                </div>
                <div class="content">
                    <?php
                    $i = 0;
                    foreach($slides as $slide){
                    ?>
                    <div class="thumb_wrapper" group="<?php echo $i; ?>">
                        <div class="image_wrapper">
                            <img src="images/<?php echo $slide[1]; ?>_0.jpg" />
                        </div>
                        <div class="caption">
                            <?php echo $slide[0]; ?>
                        </div>
                    </div>
                    <?php
                        $i++;
                    }
                    ?>
                    <div style="clear:both"></div>
                </div>
                <div class="footer">

                </div>
            </div>
            <div class="slide_view">
                <div class="nav_bar">
                    <div class="relative">
                        <div class="back">
                            <img class="exit" src="images/exit.png"/>
                        </div>
                        <div class="image_caption">

                        </div>
                    </div>
                </div>
                <img class="next" src="images/next.png"/>
                <img class="prev" src="images/prev.png"/>
                <div class="title">
                    <div class="text">
                        some text
                    </div>
                </div>
            </div>
        </div>
        <div class="overlay">

        </div>
        <div style="display:none">
        <?php
        foreach($slides as $slide){
            for($i = 0; $i < $slide[2]; $i++){
                echo '
            <img src="images/'.$slide[1].'_'.$i.'.jpg"/>';
            }
        }
        ?>
        </div>
    </body>
</html>

Answers


Please update the below CSS code:

.prev, .next{z-index:999999}
.slide_view .title{z-index:999}
.slide_view .text{z-index:9999}

Need Your Help

Checking Optionals for nil in Swift

json swift

How to check Optionals in Swift for nil values?

Invalid cell coordinate phpExcel

php phpexcel dynamic-data

Ok I'm dynamically generating the cell coordinates but I get this error, why?

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.