Safari browser compatibility

hi there i dont know whats the problem but specially in safari browser my website shows mirror image in some pages and also im using HTML5 form validation but in that browser it wont show and user can register with any password not of that pattern and other than moz,chrome ,IE it works fine please help

It is going to be difficult to see what is wrong without seeing your code or a link to your site. Which version of Safari are you having trouble with? You should be using some form of server-side validation for your form, not just relying on HTML5.

1 Like

hi this is the link http://shareyoursuperpower.org/ its in beta phase n im a fresher check this in i pad or in mac also there one js issue at register page where the pop up loads i want to close when user click YES button but it wont so temp i added a link which redirects to copy page of original can you help this is my pop up code

<!DOCTYPE html>

    <html>
	<head>
	<title></title>
	<meta name="viewport" content="width=device-width, initial-scale=1">
		<link href="images/mobile-logo.png" rel="icon" type="image/x-icon" />
		<link href='https://fonts.googleapis.com/css?family=Comfortaa' rel='stylesheet' type='text/css'>
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
		<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/mystyle.css">
	<script>
$(document).ready(function() {
var id = '#dialog';
//Get the screen height and width
var maskHeight = $(document).height();
var maskWidth = $(window).width();
//Set heigth and width to mask to fill up the whole screen
$('#mask').css({'width':maskWidth,'height':maskHeight});
//transition effect
$('#mask').fadeIn(500);
$('#mask').fadeTo("slow",0.9); 
//Get the window height and width
var winH = $(window).height();
var winW = $(window).width();
//Set the popup window to center
$(id).css('top',  winH/2-$(id).height()/2);
$(id).css('left', winW/2-$(id).width()/2);
//transition effect
$(id).fadeIn(2000);  
//if mask is clicked
$('#mask').click(function() {
$(this).hide();
$('.window').hide();
});
});
	</script>
	
	</head>
	<body><br><br><br>
	<div class="row">
	<div id="fix">
	<div class="col-md-12 col-sm-12 col-xs-12">
	<div id="boxes">
  <div id="dialog" class="window">
  <img src="images/popup.jpg" class="img-responsive" width="100%" height="auto"></img><br>
  <div class="col-md-12 col-sm-12 col-xs-12">
  <button type="button" class="btn btn-danger" id="butt"><a href="registers.php">YES</a></button>
  <button type="button" class="btn btn-danger" id="butt"><a href="index.php">NO</a></button>
  </div>                       
  </div>
  <div id="mask"></div>
</div>
</div>
</div>
</div>

	</body>
	</html>

Hi there. Before you do anything else, you need to run your page through an HTML validator. There are multiple errors any one of which may cause your page to perform differently in different browsers.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.