Support » Plugin: Popup Maker - Popup Forms, Optins & More » Bug with transition

  • Resolved mdxclr

    (@mdxclr)


    Hello,
    The overlay (bg of popup) has a problem:
    When popup is triggered the background stay visible for 1ms and only after that starting opacity transition.

    After closing popup overlay take:
    display: none;
    opacity: 1;

    After openning style get display: block first and only after that it reset opacity to 0 and start animation to 1.
    So we got a micro-lag for 1ms when the overlay is visible, hidden and stay visibile again ~500ms.
    It look’s strange

    Tested on a clean last version wordpress with popup maker only activated.

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author danieliser

    (@danieliser)

    @mdxclr – Each animation does different stuff here, can you tell me which animation type is causing this to occur?

    The Fade animation.
    The class of element: “popmake-overlay”

    When close has:
    opacity: 1;
    display: none;
    z-index: 1999999998;

    After opening is:
    opacity: 1;
    display: block;
    z-index: 1999999998;

    After 1ms:
    opacity: 0**;
    display: block;
    z-index: 1999999998;

    = Look like Showed, hidden and after that only got transition of opacity

    Plugin Author danieliser

    (@danieliser)

    @mdxclr – Though technically correct in that it does show, then opacity 0, then fade in, JS should be doing this instantaneously.

    https://github.com/PopupMaker/Popup-Maker/blob/master/assets/js/src/site/plugins/pum-animations.js#L87-L91

    I’m not sure reordering them would make any difference, simply because show(0) and css({opacity: 0}) run instantly and shouldn’t make a noticeable difference on screen.

    I will have to try and duplicate it, you said fresh install, any specific settings in your popup besided fade? What is the speed of the animation set to?

    Yeap, tried on fresh WP too,
    The speed was 350ms and 5000ms – doesn’t matter: showed immediately – hidden immediately – showed again with animation speed. No other settings.
    Grow, Fade with slide works the same bad with overlay(

    That code what u give – it’s make visible container, when the problem is with overlay.

    Plugin Author danieliser

    (@danieliser)

    @mdxclr – Good catch, don’t I feel silly. I looked again and it may be in the reposition functionality. That is the only other place we modify opacity.

    The animation for the overlay simply uses .fadeIn() which shouldn’t do that.

    During positioning though we have to make the popup visible to get its size properly for positioning. A hidden element has size of 0x0, meaning positions will be incorrectly calculated.

    https://github.com/PopupMaker/Popup-Maker/blob/master/assets/js/src/site/plugins/pum.js#L488-L491

    I have subsequently (since writing this section of code) learned that .show() has a small animation time (works like very fast fadeIn) unless you do .show(0), so I am going to change that there to begin with. Same with .hide() at the end

    https://github.com/PopupMaker/Popup-Maker/blob/master/assets/js/src/site/plugins/pum.js#L531-L533

    When it flashes, do you see the entire popup or just the overlay? If the entire popup we can test if this is the right section of code to look at by using a position like bottom right. It will flash in the middle of the screen then move. If just the overlay then a bit harder to confirm, but let me see if I can duplicate it, and if changing those to .show(0) & .hide(0) would help.

    One last thing to clarify, your trigger, I am assuming auto open, default delay?

    Generally js like that function should run in mere milliseconds, faster than the eye can detect, so I am wondering if something is causing it to be slower. Just to be sure its not device related, this isn’t a small low power netbook or similar, browsers run JS based on CPU clock cycles, so its conceivable that what should be a millisecond could be slowed down enough to be a flash. Unlikely this matches your situation though, but want to be sure I have all the most relevant info as this script has been in place since v1.0, and this is the first report so I’m not sure why its happening, just taking educated guesses based on what I do know.

    Trigger. Also I tried to disable reposition.
    Its bad for me because im use not transparent background.
    As i know – hide() made opacity from 1 to 0 and after that doing display: none;
    So show() made display block first and opacity should be 0 at this moment, after that opacity change from 0 to 1

    In popup maker by default opacity always is 1 and i see that millisecond before it stay 0, idk why ><.

    @danieliser did you see this?

    Fixed in a latest version. Thank you

    @mdxclr

    Excellent! If you’re enjoying our product, please do take a moment to click that our plugin Works and to rate and review the plugin to spread the love! <3

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Bug with transition’ is closed to new replies.