Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Custom Popup not working after navigating #7

Open
marcelpinto opened this issue May 6, 2024 · 0 comments
Open

Custom Popup not working after navigating #7

marcelpinto opened this issue May 6, 2024 · 0 comments

Comments

@marcelpinto
Copy link

marcelpinto commented May 6, 2024 •
edited

I integrated tally.so into the project. It's pretty straightforward:
changes

It works fine in the landing page, it opens the popup as seen in the video. The problem is that after navigating to any page, the popup does not work anymore. After looking at the HTML tree I saw that the popup is added in both cases at the end of the tree, but in the second case it's just displayed at the very bottom.

StarFunnel.the.Astro.powered.funnel.builder._.Starfunnel.webm

I compared both HTML tree before and after navigation:
https://www.textcompare.org/html/?id=66388764b6cd32dc820eab18

The main difference I can see is at the HTML tag level. Before navigating into a screen and opening Tally the HTML tag is

<html lang="en" data-currency="USD" data-theme="dark" class="jpeg png webp avif" style="scroll-behavior: smooth;" data-lt-installed="true" data-speed="1">

After navigating and opening tally

<html lang="en" data-currency="USD" data-theme="dark" style="scroll-behavior: smooth;">

Also, somehow the imported css are not added to the header after navigation happens. It's missing this:

    <style type="text/css">
        @keyframes index-module_spin__37ne- {
            0% {
                transform: rotate(0deg)
            }

            to {
                transform: rotate(1turn)
            }
        }

        @keyframes index-module_wave__28Vlw {
            0% {
                transform: rotate(0deg)
            }

            50% {
                transform: rotate(20deg)
            }

            to {
                transform: rotate(0deg)
            }
        }

        @keyframes index-module_heartBeat__2Hu6C {
            0% {
                transform: scale(1)
            }

            50% {
                transform: scale(1.08)
            }

            to {
                transform: scale(1)
            }
        }

        @keyframes index-module_flash__R4MoF {

            0%,
            50%,
            to {
                opacity: 1
            }

            25%,
            75% {
                opacity: .2
            }
        }

        @keyframes index-module_bounce__3V938 {

            0%,
            20%,
            53%,
            to {
                transform: translateZ(0)
            }

            40%,
            43% {
                transform: translate3d(0, -30px, 0) scaleY(1.1)
            }

            70% {
                transform: translate3d(0, -15px, 0) scaleY(1.05)
            }

            80% {
                transform: translateZ(0) scaleY(.95)
            }

            90% {
                transform: translate3d(0, -4px, 0) scaleY(1.02)
            }
        }

        @keyframes index-module_rubberBand__1JT4E {
            0% {
                transform: scaleX(1)
            }

            30% {
                transform: scale3d(1.25, .75, 1)
            }

            40% {
                transform: scale3d(.75, 1.25, 1)
            }

            50% {
                transform: scale3d(1.15, .85, 1)
            }

            65% {
                transform: scale3d(.95, 1.05, 1)
            }

            75% {
                transform: scale3d(1.05, .95, 1)
            }

            to {
                transform: scaleX(1)
            }
        }

        @keyframes index-module_headShake__5UxEd {
            0% {
                transform: translateX(0)
            }

            6.5% {
                transform: translateX(-6px) rotateY(-9deg)
            }

            18.5% {
                transform: translateX(5px) rotateY(7deg)
            }

            31.5% {
                transform: translateX(-3px) rotateY(-5deg)
            }

            43.5% {
                transform: translateX(2px) rotateY(3deg)
            }

            50% {
                transform: translateX(0)
            }
        }

        @keyframes index-module_tada__2IKJp {
            0% {
                transform: scaleX(1)
            }

            10%,
            20% {
                transform: scale3d(.9, .9, .9) rotate(-3deg)
            }

            30%,
            50%,
            70%,
            90% {
                transform: scale3d(1.1, 1.1, 1.1) rotate(3deg)
            }

            40%,
            60%,
            80% {
                transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg)
            }

            to {
                transform: scaleX(1)
            }
        }

        .index-module_overlay__8wtEj {
            -ms-flex-pack: center;
            -ms-flex-align: center;
            align-items: center;
            background-color: hsla(0, 0%, 6%, .6);
            bottom: 0;
            display: -ms-flexbox;
            display: flex;
            justify-content: center;
            left: 0;
            position: fixed;
            right: 0;
            top: 0;
            z-index: 1000000006
        }

        .index-module_layoutDefault__2IbL4 {
            bottom: 20px;
            position: fixed;
            right: 20px;
            width: auto
        }

        .index-module_layoutDefault__2IbL4,
        .index-module_layoutModal__DRP2G {
            background-color: transparent;
            border-radius: 5px;
            box-shadow: 0 0 0 1px hsla(0, 0%, 6%, .05), 0 3px 6px hsla(0, 0%, 6%, .1), 0 9px 24px hsla(0, 0%, 6%, .2);
            display: -ms-flexbox;
            display: flex;
            height: auto;
            max-width: 95vw;
            opacity: 0;
            z-index: 2147483000
        }

        .index-module_layoutModal__DRP2G {
            position: relative;
            width: 700px
        }

        .index-module_popupContainer__2msgQ {
            border-radius: 5px;
            display: -ms-flexbox;
            display: flex;
            overflow-y: auto;
            width: 100%
        }

        .index-module_popupContainer__2msgQ iframe {
            border-radius: 5px;
            max-height: 95vh
        }

        .index-module_loadingIndicator__kFdXs {
            -ms-flex-align: center;
            -ms-flex-pack: center;
            align-items: center;
            background-color: #f5f5f5;
            border-radius: 50%;
            color: #444;
            display: -ms-inline-flexbox;
            display: inline-flex;
            height: 50px;
            justify-content: center;
            position: absolute;
            width: 50px;
            z-index: 2147483000
        }

        .index-module_loadingIndicatorNoOverlay__3ZuSn {
            bottom: 10px;
            position: fixed;
            right: 10px
        }

        .index-module_loadingIndicator__kFdXs svg {
            animation: index-module_spin__37ne- 1.618s linear infinite;
            height: 20px;
            width: 20px
        }

        .index-module_emoji__1XBIX {
            display: inline-block;
            font-size: 42px;
            left: -21px;
            line-height: 1;
            position: absolute;
            top: -21px
        }

        .index-module_animate__wave__1uYZ0 {
            animation: index-module_wave__28Vlw 1s ease-in-out 20
        }

        .index-module_animate__heart-beat__2IJ5_ {
            animation: index-module_heartBeat__2Hu6C 1.3s ease-in-out 20
        }

        .index-module_animate__flash__1AGEr {
            animation: index-module_flash__R4MoF 2.5s 20
        }

        .index-module_animate__bounce__2H-Ho {
            animation: index-module_bounce__3V938 1.5s 20;
            -ms-transform-origin: center bottom;
            transform-origin: center bottom
        }

        .index-module_animate__rubber-band__1o6I- {
            animation: index-module_rubberBand__1JT4E 1.5s 20
        }

        .index-module_animate__head-shake__o7vZO {
            animation: index-module_headShake__5UxEd 1.5s ease-in-out 20
        }

        .index-module_animate__tada__2Gs8a {
            animation: index-module_tada__2IKJp 1.5s 20
        }

        .index-module_animate__spin__3oc__ {
            animation: index-module_spin__37ne- 1.618s linear 20
        }

        @media (max-height:1000px) {
            .index-module_popupContainer__2msgQ iframe {
                max-height: 85vh
            }
        }

        @media (max-width:576px) {
            .index-module_popupContainer__2msgQ iframe {
                max-height: 70vh
            }

            .index-module_layoutDefault__2IbL4,
            .index-module_layoutModal__DRP2G {
                max-width: calc(100% - 40px)
            }
        }
    </style>
    <style type="text/css">
        #arrow[data-v-20b7fd4a],
        #arrow[data-v-20b7fd4a]::before {
            transition: background 250ms ease-in-out;
            position: absolute;
            width: calc(10px - var(--popper-theme-border-width, 0px));
            height: calc(10px - var(--popper-theme-border-width, 0px));
            box-sizing: border-box;
            background: var(--popper-theme-background-color);
        }

        #arrow[data-v-20b7fd4a] {
            visibility: hidden;
        }

        #arrow[data-v-20b7fd4a]::before {
            visibility: visible;
            content: "";
            transform: rotate(45deg);
        }

        /* Top arrow */
        .popper[data-popper-placement^="top"]>#arrow[data-v-20b7fd4a] {
            bottom: -5px;
        }

        .popper[data-popper-placement^="top"]>#arrow[data-v-20b7fd4a]::before {
            border-right: var(--popper-theme-border-width) var(--popper-theme-border-style) var(--popper-theme-border-color);
            border-bottom: var(--popper-theme-border-width) var(--popper-theme-border-style) var(--popper-theme-border-color);
        }

        /* Bottom arrow */
        .popper[data-popper-placement^="bottom"]>#arrow[data-v-20b7fd4a] {
            top: -5px;
        }

        .popper[data-popper-placement^="bottom"]>#arrow[data-v-20b7fd4a]::before {
            border-left: var(--popper-theme-border-width) var(--popper-theme-border-style) var(--popper-theme-border-color);
            border-top: var(--popper-theme-border-width) var(--popper-theme-border-style) var(--popper-theme-border-color);
        }

        /* Left arrow */
        .popper[data-popper-placement^="left"]>#arrow[data-v-20b7fd4a] {
            right: -5px;
        }

        .popper[data-popper-placement^="left"]>#arrow[data-v-20b7fd4a]::before {
            border-right: var(--popper-theme-border-width) var(--popper-theme-border-style) var(--popper-theme-border-color);
            border-top: var(--popper-theme-border-width) var(--popper-theme-border-style) var(--popper-theme-border-color);
        }

        /* Right arrow */
        .popper[data-popper-placement^="right"]>#arrow[data-v-20b7fd4a] {
            left: -5px;
        }
    </style>
    <style type="text/css">
        .inline-block[data-v-5784ed69] {
            display: inline-block;
        }

        .popper[data-v-5784ed69] {
            transition: background 250ms ease-in-out;
            background: var(--popper-theme-background-color);
            padding: var(--popper-theme-padding);
            color: var(--popper-theme-text-color);
            border-radius: var(--popper-theme-border-radius);
            border-width: var(--popper-theme-border-width);
            border-style: var(--popper-theme-border-style);
            border-color: var(--popper-theme-border-color);
            box-shadow: var(--popper-theme-box-shadow);
            z-index: var(--c81fc0a4);
        }

        .popper[data-v-5784ed69]:hover,
        .popper:hover>#arrow[data-v-5784ed69]::before {
            background: var(--popper-theme-background-color-hover);
        }

        .inline-block[data-v-5784ed69] {
            display: inline-block;
        }

        .fade-enter-active[data-v-5784ed69],
        .fade-leave-active[data-v-5784ed69] {
            transition: opacity 0.2s ease;
        }

        .fade-enter-from[data-v-5784ed69],
        .fade-leave-to[data-v-5784ed69] {
            opacity: 0;
        }
    </style>
    <link href="https://fonts.googleapis.com/css?family=Poppins|Poppins:bold" rel="stylesheet">
    <style id="smrt-collector-foreground-styles">
        [class*="smrt-collector-foreground-box"] {
            background: #2c96f754;
        }
    </style>
    <script src="https://apis.google.com/js/api.js?onload=__iframefcb322581" type="text/javascript" charset="UTF-8">
    </script>
    <script src="https://apis.google.com/js/api.js?onload=__iframefcb231140" type="text/javascript" charset="UTF-8">
    </script>

I opened a bug with tally.so but it looks rather a bug in the template? Maybe caused by the navigation logic.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@marcelpinto