Bootstrap CSS not working in Internet Explorer & Background Image Over Scaling in iOS - ios

Question

I am using a free Bootstrap landing page theme, on my current site the code snippet and be run from below, which gives the desired effect on Chrome with Parallax and images. But, there are two issues which I am not able to figure out the reason for:
1.[Solved] In IE, all the sections of the page are displaying fine and Parallax works, but the content for those section is just all displaying on 1st section.
Solution : The v-center class , was causing this issue as pointed by #Fester . Removed it from the markup, and issue fixed but no solution found yet.
Un - Solved Issue
On iOS, the background image is scaled to much and just a bit from the center is displayed. Works fine on iMac, not on iPhone or iPad.
Please bear in mind I am new to CSS and trying to work my way thru, and have tried a few things suggested on different questions for the iOS issue but it does not work. The CSS is not minified, so can be easily viewed.
PS: I know, I need to try something first before asking the question but being a developer not a clue on where to start. Even a bit of pointer will be much appreciated.
Edit 1: Tried modernizr with HTML5shiv but still giving the same issue. Just included the modernizr and HTML5shiv js file. No changes were made to the code.
EDIT 2: The Issue with IE was caused by v-center class. Removed it, and everything fine. But, now actual reason or solution found.
Code is As Below:
/* activate scrollspy menu */
$('body').scrollspy({
target: '#navbar-collapsible',
offset: 52
});
/* smooth scrolling sections */
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 50
}, 800);
if (this.hash=="#section1") {
$('.scroll-up').hide();
}
else {
$('.scroll-up').show();
}
// activte animations in this section
target.find('.animate').delay(1200).addClass("animated");
setTimeout(function(){
target.find('.animated').removeClass("animated");
},2000);
return false;
}
}
});
#import url(http://fonts.googleapis.com/css?family=Lato:300,400);
#import url(http://fonts.googleapis.com/css?family=Bitter:400);
html,body {
height:100%;
background:center no-repeat fixed url('http://dd.e-wizardbathrooms.co.uk/background.jpg');
-o-background-size: cover;
-moz-background-size: cover;
-webkit-background-size:cover;
color:#444;
font-family: 'Lato', sans-serif;
}
#media (min-width:768px) {
h1 {
font-size:68px;
}
}
a {
color:#999;
}
a:hover {
color:#111;
}
.btn,.well,.panel {
border-radius:0;
}
.btn-danger {
background-color:#f44d3c;
}
.btn-main {
color: #ffffff !important;
border-radius: 10px;
background-color: rgba(244,77,60,0.7);
padding-bottom: 10px;
}
.text-danger, a.text-danger {
color:#f44d3c;
}
.btn-huge {
padding:17px 22px;
font-size:22px;
}
.lato {
font-family: 'Lato', sans-serif;
}
.bitter {
font-family: 'Bitter', serif;
}
.icon-bar {
background-color:#fff;
}
.navbar-trans {
background-color:#273a60;
color:#cdcdcd;
border-width:0;
}
.navbar-trans .navbar-brand, .navbar-trans >.container-fluid .navbar-brand {
padding: 14px;
color:#cdcdcd;
}
.navbar-trans li>a:focus,.navbar-trans li.active {
background-color:#f44d3c;
color:#333;
}
.navbar-trans li>a:hover {
background-color:#f44d3c;
color:#fff;
opacity:0.5;
}
.navbar-trans a{
color:#cdcdcd;
letter-spacing:1px;
}
.navbar-trans .form-control:focus {
border-color: #eee;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(100,100,100,0.6);
}
.scroll-down {
position: absolute;
left: 50%;
bottom: 40px;
border: 2px solid #fff;
border-radius: 50%;
height: 50px;
width: 50px;
margin-left: -15px;
display: block;
padding: 7px;
text-align: center;
z-index:-1
}
.scroll-up {
position: fixed;
display: none;
z-index: 999;
bottom: 2em;
right: 2em;
}
.scroll-up a {
background-color: rgba(135, 135, 135, 0.5);
display: block;
width: 35px;
height: 35px;
text-align: center;
color: #fff;
font-size: 15px;
line-height: 30px;
}
section {
padding-top:70px;
padding-bottom:50px;
min-height:100%;
min-height:calc(100% - 0);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
#media (min-width:768px) {
.v-center {
height: 50%;
overflow: visible;
margin: auto;
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
}
}
#section1, #section3 {
background-color: rgba(0,0,0,0.3);
color:#fff;
font-family: 'Bitter', serif;
}
#section4 {
background-color: #f6f6f6;
color:#444;
}
#section2 {
background-color: #fff;
}
#section3 {
background-color: rgba(0,0,0,0.9);
}
#section5 {
background-color: #fff;
}
#section6 {
background-color: #eee;
min-height:130px;
padding-top:40px;
padding-bottom:40px;
}
#section7 {
background-color: #273a60;
color: #f6f6f6;
min-height:130px;
padding-top:40px;
padding-bottom:40px;
}
footer {
background-color:#2b2b2b;
color:#ddd;
min-height:100px;
padding-top:20px;
padding-bottom:40px;
}
footer .nav>li>a {
padding: 3px;
color: #f44d3c;
}
footer .nav>li>a:hover {
background-color:transparent;
color:#fff;
}
<!DOCTYPE html>
<html>
<head>
<title>David Dixon Garden Machinery</title>
<meta charset="utf-8">
<meta name="description" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body >
<nav class="navbar navbar-trans navbar-fixed-top" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapsible">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">David Dixon</a>
</div>
<div class="navbar-collapse collapse" id="navbar-collapsible">
<ul class="nav navbar-nav navbar-left">
<li>Home</li>
<li>Information</li>
<li>About Us</li>
<li>Contact Us</li>
<li> </li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><strong>Phone: </strong>01434-606060</li>
<li><strong>E-Mail:</strong>info#daviddixons.co.uk</li>
</ul>
</div>
</div>
</nav>
<section class="container-fluid" id="section1">
<div class="v-center">
<h1 class="text-center">David Dixon</h1>
<h2 class="text-center lato animate slideInDown"><b>Garden Machinery</b></h2>
<h4 class="text-center lato animate slideInDown">Please Select one of the Following or Scroll Down for More Info.</h4>
<p class="text-center">
<br>
Online Shop
Servicing & Parts
Equipment Hire
</p>
</div>
<a href="#section2">
<div class="scroll-down bounceInDown animated">
<span>
<i class="fa fa-angle-down fa-2x"></i>
</span>
</div>
</a>
</section>
<section class="container-fluid" id="section2">
<div class="container v-center">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default slideInLeft animate">
<div class="panel-heading">
<h3>Online Shop</h3></div>
<div class="panel-body">
<p>
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
</p>
<hr>Go
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default slideInUp animate">
<div class="panel-heading">
<h3>Servicing & Parts</h3></div>
<div class="panel-body">
<p>
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
</p>
<hr>Go
<hr>
</div>
</div>
</div>
</div>
</div>
<div class="col-sm-4 text-center">
<div class="row">
<div class="col-sm-12 text-center">
<div class="panel panel-default slideInRight animate">
<div class="panel-heading">
<h3>Equipment Hire</h3></div>
<div class="panel-body">
<p>
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
Content giving further information to be placed here..
</p>
<hr>Go
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
<!--/row-->
<div class="row">
<br>
</div>
</div>
<a href="#section3">
<div class="scroll-down bounceInDown animated">
<span>
<i class="fa fa-angle-down fa-2x"></i>
</span>
</div>
</a>
<!--/container-->
</section>
<section class="container-fluid" id="section3">
<h1 class="text-center">David Dixon</h1>
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3 class="text-center lato slideInUp animate">The Best for <strong>Garden and Forest Machinery</strong> in the North East.</h3>
<br>
<div class="row">
<div class="col-xs-4 col-xs-offset-1">Additional Information about David Dixon Company and History</div>
<div class="col-xs-2"></div>
<div class="col-xs-4 text-right">Additional Information about David Dixon Company and History</div>
</div>
<br>
<p class="text-center">
<img src="//placehold.it/10x10/444/FFF" class="img-responsive thumbnail center-block ">
</p>
</div>
</div>
<h3 class="text-center">Brands we Work with</h3>
<div class="row">
<div class="col-sm-2 col-sm-offset-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-2 col-sm-offset-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
<div class="col-sm-2 col-xs-6">
<div class="text-center">
<a href="">
<img style="width:200px;" class="img-circle img-responsive img-thumbnail" src="//placehold.it/200/444">
</a>
<h3 class="text-center"></h3>
</div>
</div>
</div>
<a href="#section4">
<div class="scroll-down bounceInDown animated">
<span>
<i class="fa fa-angle-down fa-2x"></i>
</span>
</div>
</a>
</section>
<section id="section4">
<div class="container v-center">
<div class="row">
<div class="col-md-12">
<h1 class="text-center">Contact US</h1>
<hr>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="row form-group">
<div class="col-sm-5">
<input type="text" class="form-control" id="firstName" name="firstName" placeholder="First Name" required="">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" id="lastName" name="lastName" placeholder="Last Name" required="">
</div>
</div>
<div class="row form-group">
<div class="col-sm-5">
<input type="email" class="form-control" name="email" placeholder="Email" required="">
</div>
<div class="col-sm-5">
<input type="text" class="form-control" name="phone" placeholder="Phone" required="">
</div>
</div>
<div class="row form-group">
<div class="col-sm-10">
<input type="text" class="form-control" placeholder="Message" required="">
</div>
</div>
<div class="row form-group">
<div class="col-sm-10">
<button class="btn btn-default btn-lg pull-right">Send Message</button>
</div>
</div>
</div>
<div class="col-sm-3">
<address>
<strong>Opening Hours:</strong><br>
Monday to Friday: 8am - 5pm<br>
Saturday: 8.30am - 12.30pm<br>
</address>
<address>
<strong>Phone: </strong>01434-606060
</address>
</div>
<div class="col-sm-3 pull-right">
<address>
<strong>David Dixon Ltd.</strong><br>
18, Haugh Lane Industrial Estate<br>
Hexham, Norhtumberland<br>
United Kingdom - NE46 3PU<br>
</address>
<address>
<strong>Email Us</strong><br>
info#daviddixons.co.uk
</address>
</div>
</div>
<div class="row">
<div class="row"> </div>
<a href="#">
<div class="col-sm-2 col-sm-offset-3 col-xs-4 text-center">
<i class="fa fa-facebook fa-4x"></i>
</div>
</a>
<a href="#">
<div class="col-sm-2 col-xs-4 text-center">
<i class="fa fa-google-plus fa-4x"></i>
</div>
</a>
<a href="#">
<div class="col-sm-2 col-xs-4 text-center">
<i class="fa fa-twitter fa-4x"></i>
</div>
</a>
</div>
</div>
</section>
<footer id="footer">
<div class="container">
<!--/row-->
<p class="text-center">David Dixons Ltd. ® 2015</p>
</div>
</footer>
<div class="scroll-up">
<i class="fa fa-angle-up"></i>
</div>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.1.1/animate.min.css" rel="stylesheet" type="text/css" />
<link href="styles.css" rel="stylesheet" type="text/css" />
<!--scripts loaded here-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="scripts.js"></script>
</body>
</html>