Forum
Odd behaviour viewing page in Safari
Hi,
I've noticed an issue viewing a home page slider (jaccordion) on Safari whether that's on the desktop, on an iPhone or on an iPad the results are all the same. Sometimes (rarely) it will load properly sometimes not and refreshing the page does nothing either. The problem doesn't happen in Chrome or FF
This is the url in question is https://ges.so53dev.co.uk/ and the content is driven by Perch
To troubleshoot, I've created a flat html version (by viewing source of the above page and pasted into a file and named it index2.html) - https://ges.so53dev.co.uk/index2.html. This loads fine in Safari on all devices yet it's the same code.
The index.php code is this:
<?php include($_SERVER['DOCUMENT_ROOT'].'/site_admin/runtime.php');
perch_layout('global.header');
perch_content('Home Slides');
perch_content('Home Page Content');
perch_layout('global.prefooter');
perch_layout('global.footer');
?>
The global.header code is this:
<!DOCTYPE html>
<html>
<head>
<title><?php perch_pages_title(); ?></title>
<? perch_page_attributes(array(
'template' => 'seo.html'
));
?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="/style.css" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Nunito:400,700,300' rel='stylesheet' type='text/css'>
<link type="text/css" href="/jAccordion/default.css" rel="stylesheet">
<link href="/responsive.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript" src="/utils/jquery.easing.1.3.min.js"></script>
<script type="text/javascript" src="/utils/jquery.jAccordion.min.js"></script>
<script type="text/javascript" src="/js/accordion-homepage.js"></script>
</head>
<body>
<div class="wrapper">
<div class="header">
<div class="block_header">
<div class="logo"><a href="/"><img src="/images/logo.png" border="0" alt="logo" /></a></div>
<?php perch_content('Header Contact'); ?>
<!-- menu -->
<div class="menu">
<span class="nav"></span>
<?php perch_pages_navigation(); ?>
<!-- responsive menu -->
<script>
$( "span.nav" ).click(function() {
$( ".menu ul" ).slideToggle(300, function() {
// Animation complete.
});
});
</script>
<!-- end of responsive menu -->
</div> <!-- end of menu -->
<div class="clr"></div>
</div> <!-- end of block_header -->
</div> <!-- end of header -->
<div class="clr"></div>
This leads me to think it's something to do with how Perch is handling the output for the js ?
Any ideas/suggestions?
Cheers Neil
By the time it gets to the browser, Perch isn't going to have any impact so the thing to do would be to View Source and look for any differences between your example and the one generated by Perch.
If it is JavaScript then your browser dev tools may also be handy.
Hi Rachel,
Thanks, I had already done a file compare of the view source and everything was exactly the same.
It just seems odd that the plain html file works yet the page served by Perch doesn't
Any more ideas?
I don't have any suggestions.
Ok, well this makes no sense, that the same page views fine in Safari as flat .html/.php file but when output from Perch it doesn't. Not a problem in any other browser either.
Scratching my head. Perhaps there is some miniscule latency when loading the js when running via Perch which is tripping Safari out? Not being js developer instead just a user I can't really tell what's what when debugging :(
I guess I'll have to look at a different slider script that works within the integration with Perch.
What a pain.
The issue was resolved in the end. Turns out there was newer version of the script I was using. It looks like the script developers tidied up a lot of the code and as a result the slider is now loading fine through Perch :)