Cubix effect (case result) doesn\'t work on safari …

Home Forums Forstron Cubix effect (case result) doesn\'t work on safari …

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #21937

    Cubix effect (case result) doesn\'t work on safari …

    Resolved

    Hey there! Have you noticed this support service is provided FREE of charge?
    If you like the speed and accuracy of resolutions, please consider supporting me with a small donation. Thank you

    Consider a donation →

    Hey Webman,

    we use the theme forstron ant we like it ;-) Unfortunately the cubix effect (case result) does not work on safari. Do you know how we can make the effect working in safari?

    thx!

    Regards
    bjoern

    #21938
    Oliver Juhas
    Keymaster

    Hi bjoern,

    Thank you, I’m glad you like the theme :)

    Could you please let me know the version of Safari you are using? Also, I presume we talk about desktop screen, correct?

    Do you experience the same issue with theme demo website?

    Best regards,

    Oliver Juhas
    WebMan Design

    #21939
    Oliver Juhas
    Keymaster

    If the issue still persist even on theme demo website, can I ask you to test with this custom CSS (I am currently not possible to test the result on Safari browser, but will do my best to do so ASAP):

    @-webkit-keyframes in-top {
      0% {
        -webkit-transform: rotateX(-120deg);
                transform: rotateX(-120deg);
      }
      100% {
        -webkit-transform: rotateX(0deg);
                transform: rotateX(0deg);
      }
    }
    @keyframes in-top {
      0% {
        -webkit-transform: rotateX(-120deg);
                transform: rotateX(-120deg);
      }
      100% {
        -webkit-transform: rotateX(0deg);
                transform: rotateX(0deg);
      }
    }
    
    @-webkit-keyframes in-right {
      0% {
        -webkit-transform: rotateY(-120deg);
                transform: rotateY(-120deg);
      }
      100% {
        -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
      }
    }
    @keyframes in-right {
      0% {
        -webkit-transform: rotateY(-120deg);
                transform: rotateY(-120deg);
      }
      100% {
        -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
      }
    }
    
    @-webkit-keyframes in-bottom {
      0% {
        -webkit-transform: rotateX(120deg);
                transform: rotateX(120deg);
      }
      100% {
        -webkit-transform: rotateX(0deg);
                transform: rotateX(0deg);
      }
    }
    @keyframes in-bottom {
      0% {
        -webkit-transform: rotateX(120deg);
                transform: rotateX(120deg);
      }
      100% {
        -webkit-transform: rotateX(0deg);
                transform: rotateX(0deg);
      }
    }
    
    @-webkit-keyframes in-left {
      0% {
        -webkit-transform: rotateY(120deg);
                transform: rotateY(120deg);
      }
      100% {
        -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
      }
    }
    @keyframes in-left {
      0% {
        -webkit-transform: rotateY(120deg);
                transform: rotateY(120deg);
      }
      100% {
        -webkit-transform: rotateY(0deg);
                transform: rotateY(0deg);
      }
    }

    Thank you!

    Best regards,

    Oliver Juhas
    WebMan Design

    • This reply was modified 10 months, 2 weeks ago by Oliver Juhas. Reason: Updating the code
    #21941

    Hi Oliver,

    thanks for your answer!
    Yes we talk about the desktop screen ;-) On the theme demo-site the cubix effect doesn‘t work too. I also checked your css-code, but without a result. The Textbox just appears without the nice effect … On other browsers like firefox, chrome, etc. it looks good.

    (I’m using Safari Version 12.1.1)

    Best regards
    Björn

    • This reply was modified 10 months, 2 weeks ago by Oliver Juhas. Reason: Making the post public as there is no sensitive information shared
    #21943
    Oliver Juhas
    Keymaster

    Hi Björn,

    Thank you for the update. I will check as soon as I get to Safari browser. Meanwhile I’m sorry for inconvenience caused, but from what you mention, the information accessibility is not affected, just the animation is not working in Safari, if I understand correctly. I will look into the issue and will provide you with a fix in upcoming days. Thank you for patience and understanding!

    Best regards,

    Oliver Juhas
    WebMan Design

    #21950
    Oliver Juhas
    Keymaster

    Hi Björn,

    It seems I will be able to test the website on Safari on Thursday evening only. I will update you on Friday morning, if that’s OK. I’d like to ask you for patience and I’m really sorry for inconvenience. Thank you for understanding.

    Best regards,

    Oliver Juhas
    WebMan Design

    #21951

    Hi,

    right, the information accessibility is not affected. Only the effect… I’m looking forward to your solution. Thanks for your help ;-)

    Regards
    Björn

    • This reply was modified 10 months, 2 weeks ago by Oliver Juhas. Reason: Making the post public as there is no sensitive information shared
    #21966
    Oliver Juhas
    Keymaster

    Hi Björn,

    I’m sorry for delay in my answer. The issue is related to some Safari rendering bug as it seems not able to stack 2 animations on top of each other.

    The solution while I find some hack could be this custom CSS, which disables the case result image hover animation and thus enables the cubic rollover navigation only:

    .cubic .image {
    	-webkit-transition: none;
    	transition: none;
    	-webkit-transform: none;
    	transform: none;
    }
    
    .cubic .wm-posts-item:hover .image {
    	-webkit-transform: none;
    	transform: none;
    }

    Best regards,

    Oliver Juhas
    WebMan Design

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.