Very odd glitches in Safari, don’t know how to fix that:
-
Sometimes my navbar disappears, if I scroll the page it appears back, this can happen on any page.
-
On the contact page both navbar and a div with a background image disappears. It reappears back as soon as I touch the mouse. I have a preloader-div as a general holder for all the content which has an interactions applied to it, however this glitch only happens on a contact page, so I don’t think it should be the cause?
Both glitches are not easy to replicate, but I noticed they tend to happen when I refresh the page , or surf the site a bit longer, clicking some links and buttons etc, however if I just quickly skip through pages usually all is well.
Here is a video demonstrating both of the glitches (demo performed in private tab)
UPDATE: Forgot to mention another bug, which happens 1 out of 4 times or so when I click “read reviews” on the books page, sometimes upon scroll the page jumps quite ugly. I have a very tricky set of interactions on this page, but then again in Chrome it works smoothly.
Mac OS 10.13.6 (17G65)
Safari Version 11.1.2 (13605.3.8)
Also here is what I have in my project settings custom code:
Header:
<style>
html.wf-loading * {
opacity: 0;
}
html {
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
</style>
<style>
.navbar {
-webkit-backdrop-filter: blur(10px);
}
</style>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />
<style>
.cc-revoke {
display: none;
}
</style>
Footer:
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
<script>
var enableGA = function() {
(function(i, s, o, g, r, a, m) {
i['GoogleAnalyticsObject'] = r;
i[r] = i[r] || function() {
(i[r].q = i[r].q || []).push(arguments)
}, i[r].l = 1 * new Date();
a = s.createElement(o), m = s.getElementsByTagName(o)[0];
a.async = 1;
a.src = g;
m.parentNode.insertBefore(a, m)
})(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
ga('create', 'UA-122073496-1', 'auto');
ga('send', 'pageview');
};
window.addEventListener("load", function() {
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#EEEEEE"
},
"button": {
"background": "#F89406",
"text": "#ffffff"
}
},
revokable:true,
"theme": "classic",
"type": "opt-in",
"content": {
"message": "We use cookies to provide you best experience on our website. We also use Google analytics for our internal statistics. You may choose to disable analytics if you prefer. ",
"dismiss": "Disable analytics",
"allow": "Got It!",
"link": "Learn More",
"href": "/privacy-policy"
},
onInitialise: function (status) {
var type = this.options.type;
var didConsent = this.hasConsented();
if (type == 'opt-in' && didConsent) {
// enable cookies
enableGA();
}
if (type == 'opt-out' && !didConsent) {
// disable cookies
// NOTHING TO DO
}
},
onStatusChange: function(status, chosenBefore) {
var type = this.options.type;
var didConsent = this.hasConsented();
if (type == 'opt-in' && didConsent) {
// enable cookies
enableGA();
}
if (type == 'opt-out' && !didConsent) {
// disable cookies
// NOTHING TO DO
}
},
onRevokeChoice: function() {
var type = this.options.type;
if (type == 'opt-in') {
// disable cookies
// NOTHING TO DO
}
if (type == 'opt-out') {
// enable cookies
enableGA();
}
}
}, function (popup) {
$('#revoke-cc-btn').on('click', function() {
popup.revokeChoice();
});
})
});
</script>
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
