Home Forums Glissando Fixed chrome scrolling, animation issues, now animations not loading in Safari?

This topic contains 9 replies, has 2 voices, and was last updated by  tf35strike 3 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #47736

    tf35strike
    Participant

    Hi ThemeLux/Joshua.
    I have applied the fixes for Google Chrome with the scrolling and the loading of animations as shown here:

    http://themeluxe.com/support/topic/error-happened-in-home-page/#post-46999

    and here

    http://themeluxe.com/support/topic/animations-and-autoscroll-stopped-working-on-crhome/

    But the loading of animations does not appear to work for me correctly now in Safari on Mac???

    I have updated all plugins and WordPress to the latest versions.

    I am unsure if the theme itself needs to be updated? I’ve got a code from Envato when I purchased the theme but never entered it in to the Theme updates section as I wasn’t sure how that is supposed to work when running my localhost server on my own computer and also having the one on the live online server etc.

    My custom code
    In the theme options

    CSS Code

    .header{
    }

    /*removing the white from the vertical slider shown over images*/
    .flexslider{
    background: rgba(255, 255, 255, 0) !important;
    border:0px solid #fff !important;
    box-shadow: none !important;
    -moz-box-shadow: none !important;
    }

    /*making font slightly less thick*/
    p{
    -webkit-font-smoothing: antialiased;
    }

    header[role=”banner”] .nav li a{
    color: #000000;
    }

    #logo /*,#scrolled-logo*/{
    margin: 10px 0px 0px 0px;
    }

    .metaslider.metaslider-flex .slides img {
    width: inherit
    }

    .single-title,
    .page-title {
    margin-top: 20px;
    }

    /*bringing first angled bar above metaslider*/
    #container-12:before{
    z-index: 1000;
    }

    /*making white angle bar on slider higher*/
    #container-10.container:after{
    margin-top: -55px !important;
    }

    /*fixing up nav button for mobile*/
    #mobile-nav-button{
    /*margin-top: 0px;*/
    width:28px;
    /*height:0px;*/
    }

    @media (max-width: 768px) {
    #logo img {
    max-height: 50px !important;
    }
    }

    @media (max-width: 768px){
    #scrolled-logo img {
    max-height: 50px;
    margin-top: 4px;
    }
    }

    /*hide that little logo on mobile version*/
    @media (max-width: 768px){
    header[role=’banner’] #logo img {
    display:none;
    }
    }

    /*fixing/masking image window sizes smaller for mobile*/
    @media (max-width: 480px){
    /*team photo*/
    #container-91 {
    padding-top: 100px;
    padding-bottom: 100px;
    background-size: 800px;
    background-repeat: no-repeat;
    }

    #container-676 {
    padding-top: 320px;
    padding-bottom: 0px;
    background-size: 500px;
    background-repeat: no-repeat;
    }

    /*henry service centre*/
    #container-680 {
    padding-top: 150px;
    padding-bottom: 150px;
    background-size: 1100px;
    background-repeat: no-repeat;
    }

    /*dave under car qualified staff*/
    #container-710 {
    padding-top: 150px;
    padding-bottom: 150px;
    background-size: 1100px;
    background-repeat: no-repeat;
    }

    /*jordie price in work*/
    #container-682 {
    padding-top: 150px;
    padding-bottom: 150px;
    background-size: 1100px;
    background-repeat: no-repeat;
    }

    /*space between the feature items*/
    .feature{
    padding: 24px 15px 08px;
    margin-bottom: 0px;
    }

    /*space between header – and body text*/
    .page-header{
    margin-bottom: 30px !important;
    }

    header[role=”banner”] .nav li a {
    color: #000 !important;
    }
    }

    /*removing the different colors apple gives for active phone numbers*/
    a[href^=tel]{
    color:inherit;
    text-decoration:none;
    }

    /*colors for send successfull message*/
    div.wpcf7-mail-sent-ok {
    border: 2px solid #32A800;
    background-color: green;
    color: #fff;
    }

    header[role=”banner”] .nav li a {
    color: #fff;
    }

    JavaScript code
    jQuery(document).ready(function($) {

    //jQuery(function(){
    //$(‘#container-10′).prepend( $(‘.metaslider’) );
    //});

    jQuery(function(){
    $(‘#container-10′).prepend( $(‘#metaslider_756′) );
    });

    });

    Any help with getting this working on Safari would be much appreciated site was working fine until the chrome issues appeared last year.

    I can supply the link to full website but don’t really want to post it to a public forum etc.

    #47737

    Joshua
    Keymaster

    Can you post a link to your site? You can mark the post private.

    #47767

    tf35strike
    Participant
    This reply has been marked as private.
    #47770

    Joshua
    Keymaster

    Safari doesn’t appear to be detecting the scroll properly. Just tested and this should work across the new Chrome and Safari.

    Try replacing that same line in scripts.js starting with:

    var scrollElem

    with this:

    var scrollElem = $(document.scrollingElement || "html");

    Let me know if that resolves it.

    #47788

    tf35strike
    Participant

    Awesome thanks Josh worked straight away normally in both browser.
    I also just noticed one of the buttons is now displaying html on the page instead of showing the actual button?

    It’s under the welcome section at the top of the page, shows
    [button style=”alt” text_color=”#343434″ slide=”services”]Learn More[/button]

    When I check the code for the page inside of wordpress it shows

    [button style="alt" text_color="#343434" slide="services"]Learn More[/button]</p>

    Any idea?

    #47791

    Joshua
    Keymaster

    You may try retying it out as there may be hidden characters causing problems.

    Otherwise, you may want to disable all non-theme plugins to see if something is causing a conflict.

    #47795

    tf35strike
    Participant

    Hi Josh, that code was pure html (from text view)
    [button style="alt" text_color="#343434" slide="services"]Learn More[/button]

    The site only runs Glissando theme related plugins, I deactivated them all to try anyway but still just shows HTML for the button

    I haven’t changed anything else on site apart from fixes for chrome issues etc

    #47796

    tf35strike
    Participant

    Found the error Josh, realised that the button requires it’s own seperate opening <p> tag and not included in other, it must have been automatically being striped out when the client was making changes.

    Works

    <p style=”text-align: center;”>[button style="alt" text_color="#343434" slide="services"]Learn More[/button]</p>

    Thanks for the help

    #47798

    tf35strike
    Participant

    actually the issue was not the <p> tag rather “style=”alt”” had to be moved right to the end of the tag closing bracket “]”, not sure why this happened, must of been something to do with an update with wordpress or something? Client would not have done this.

    doesn’t work
    [button style="alt" text_color="#343434" slide="services"]Learn More[/button]

    works
    [button text_color="#343434" slide="services" style="alt"]Learn More[/button]

    #47799

    tf35strike
    Participant

    Wrong again it was actually the [/animate] tag that was automatically being stripped/changed when client did updates etc

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.