I've been coding for a month so sorry if this has an easy answer, but I've been searching for days with no result.
I've built a simple practise webpage using a Bootstrap carousel as the page background and jQuery to make divs (where page content will eventually go) appear. When I open the HTML file in Chrome, Firefox and Opera the page works fine, but when the file is opened in Safari on an iPhone or iPad, the links to the divs don't work (when clicked, nothing appears) and the Carousel doesn't work at all, instead appearing as four separate images down the page with simple 'previous' and 'next' links appearing at the bottom of the page. Unfortunately I have no way to test the page on a desktop version of Safari. I feel like there's something simple I'm missing but I can't figure it out. Thanks in advance. Below is the entire code for my site (CSS, HTML and jQuery), and here is a jsFiddle of the page: https://jsfiddle.net/fh8pxqqt/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="icon" type="image/png" href="http://res.cloudinary.com/jamesddavies/image/upload/v1469359895/strohl_logo_bod9yw.png"/>
<title>Alex Strohl</title>
<style>
#bg-wrapper {
position: relative;
}
/*Carousel Background*/
#carousel-bg {
width: 100%;
height: 100%;
}
.carousel-inner > .item > img, .carousel-inner > .item > a > img {
width: 100%;
height: 100vh;
overflow: hidden;
object-fit: cover;
-webkit-object-fit: cover;
-o-object-fit: cover;
-moz-object-fit: cover;
}
/*Nav*/
nav {
}
ul {
height: 75px;
line-height: 50px;
background: rgba(255,255,255,0.4);
text-align: left;
padding: 10px;
z-index: 1;
position: absolute;
width: 100%;
}
ul:hover {
background: rgba(255,255,255,1);
transition: 500ms;
-webkit-transition: 500ms;
-o-transition: 500ms;
-moz-transition: 500ms;
}
ul:not(:hover) {
background: rgba(255,255,255,0.4);
transition: 500ms;
-webkit-transition: 500ms;
-o-transition: 500ms;
-moz-transition: 500ms;
}
ul img {
padding-right: 30px;
padding-left: 30px;
}
ul img:hover {
opacity: 0.5;
filter:Alpha(opacity=50);
transition: 300ms;
-webkit-transition: 300ms;
-o-transition: 300ms;
-moz-transition: 300ms;
}
ul img:not(:hover) {
opacity: 1;
filter:Alpha(opacity=50);
transition: 300ms;
-webkit-transition: 300ms;
-o-transition: 300ms;
-moz-transition: 300ms;
}
li {
color: rgba(0,0,0,1);
text-decoration: none;
}
.link:focus {
color: rgba(0,0,0,0.5);
text-decoration: none;
}
.link:hover {
text-decoration: none;
color: rgba(0,0,0,0.5);
transition: 300ms;
-webkit-transition: 300ms;
-o-transition: 300ms;
-moz-transition: 300ms;
cursor: pointer;
}
.link:not(:hover) {
color: rgba(0,0,0,1);
transition: 300ms;
-webkit-transition: 300ms;
-o-transition: 300ms;
-moz-transition: 300ms;
}
.link:click {
color: rgba(0,0,0,0.5);
}
li {
display: inline;
vertical-align: middle;
line-height: normal;
padding: 10px;
z-index: 1;
}
li img {
height: 50px;
width: auto;
}
/*adventures*/
#adventures-wrapper {
text-align: center;
}
.adventures {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*commissions*/
#commissions-wrapper {
text-align: center;
}
.commissions {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*book*/
#book-wrapper {
text-align: center;
}
.book {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*alex*/
#alex-wrapper {
text-align: center;
}
.alex {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*contact*/
#contact-wrapper {
text-align: center;
}
.contact {
width: 80%;
height: 70%;
background-color: rgba(255,255,255,0.9);
color: rgba(0,0,0,1);
position: absolute;
top: 120px;
left: 0;
right: 0;
margin: 0 auto;
z-index: 1;
display: none;
}
/*responsive design*/
@media (max-width: 1000px){
ul {
text-align: center;
}
}
</style>
</head>
<body>
<div id="bg-wrapper">
<!--Navbar-->
<div class="nav">
<ul>
<li><img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469359895/strohl_logo_bod9yw.png"></li>
<li class="link adventures-link">Adventures</li>
<li class="link commissions-link">Commissions</li>
<li class="link book-link">Book</li>
<li class="link alex-link">Alex</li>
<li class="link contact-link">Contact</li>
</ul>
</div>
<!--Adventures-->
<div id="adventures-wrapper">
<div class="adventures">
<h1>Adventures</h1>
</div>
</div>
<!--Commissions-->
<div id="commissions-wrapper">
<div class="commissions">
<h1>Commissions</h1>
</div>
</div>
<!--Book-->
<div id="book-wrapper">
<div class="book">
<h1>Book</h1>
</div>
</div>
<!--Alex-->
<div id="alex-wrapper">
<div class="alex">
<h1>Alex</h1>
</div>
</div>
<!--Contact-->
<div id="contact-wrapper">
<div class="contact">
<h1>Contact</h1>
</div>
</div>
<!--Carousel background-->
<div id="carousel-bg" class="carousel slide" data-ride="carousel" data-pause="false">
<!--Indicators-->
<ol class="carousel-indicators hidden">
<li data-target="#carousel-bg" data-slide-to="0" class="active"> </li>
<li data-target="#carousel-bg" data-slide-to="1"></li>
<li data-target="#carousel-bg" data-slide-to="2"></li>
<li data-target="#carousel-bg" data-slide-to="3"></li>
</ol>
<!--Wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264082/STROHL__MG_1150-Edit_wdcn2g.jpg">
</div>
<div class="item">
<img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264097/_ST_3667_ob8jtb.jpg">
</div>
<div class="item">
<img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264105/_ST_4081_yb2vdd.jpg">
</div>
<div class="item">
<img src="http://res.cloudinary.com/jamesddavies/image/upload/v1469264128/_ST_9411_h9ftou.jpg">
</div>
</div>
<!--Left and Right controls-->
<a class="left carousel-control hidden" href="#carousel-bg" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control hidden" href="#carousel-bg" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"> </span>
<span class="sr-only">Next</span>
</a>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script>
/*Link functionality*/
$(document).ready(function(){
$("#carousel-bg").click(function(){
$(".adventures, .commissions, .book, .alex, .contact").hide(500);
});
});
$(document).ready(function(){
$(".adventures-link").click(function(){
$(".adventures").toggle(500);
$(".commissions, .book, .alex, .contact").hide(500);
});
});
$(document).ready(function(){
$(".commissions-link").click(function(){
$(".commissions").toggle(500);
$(".adventures, .book, .alex, .contact").hide(500);
});
});
$(document).ready(function(){
$(".book-link").click(function(){
$(".book").toggle(500);
$(".adventures, .commissions, .alex, .contact").hide(500);
});
});
$(document).ready(function(){
$(".alex-link").click(function(){
$(".alex").toggle(500);
$(".adventures, .commissions, .book, .contact").hide(500);
});
});
$(document).ready(function(){
$(".contact-link").click(function(){
$(".contact").toggle(500);
$(".adventures, .commissions, .book, .alex").hide(500);
});
});
</script>
</body>
