Modal built with alpinejs only working after page refresh in Firefox

[mmarcelino]

Hi folks!

I have a modal on my page which was built using Alpinejs. When you click the "See how it works" button a modal opens and a video should start playing automatically. You can then close the modal by clicking outside the modal or the "Close video" button.

All this works perfectly fine in Chrome and Safari both locally and in production and it also does so in Firefox when I test it locally - but the video won't start playing when in production in Firefox only - the modal opens and closes, but nothing happens inside it, unless I refresh my page and then the video does start playing.

Is there anything in particular I should to ensure it loads correctly in Firefox without the need of a page refresh?

Here's my code for this specific section within the page:

HTML

<div class="section-how-it-works" x-ignore ax-load x-data="{ modalOpen: false }">
<div x-ignore ax-load x-data="VideoModal">
	<!-- how it works video button -->
	<button id="open-modal-button" class="button button-secondary" aria-label="See how it works" @click="modalOpen = true" aria-controls="modal" >
		<span class="text">See how it works</span>
		<span class="icon">
			<Icon name="video-play" size="16" />
		</span>
	</button>
	<!-- how it works modal backdrop -->
	<div class="modal-backdrop"
			x-show="modalOpen"
			x-transition:enter="transition ease-out duration-200"
			x-transition:enter-start="opacity-0"
			x-transition:enter-end="opacity-100"
			x-transition:leave="transition ease-out duration-100"
			x-transition:leave-start="opacity-100"
			x-transition:leave-end="opacity-0" 
			aria-hidden="true"
			x-cloak
	></div>	
	<!-- how it works video modal -->
	<div id="modal"
		role="dialog"
		aria-modal="true"
		x-show="modalOpen"
		x-transition:enter="transition ease-out duration-300"
		x-transition:enter-start="opacity-0 scale-75"
		x-transition:enter-end="opacity-100 scale-100"
		x-transition:leave="transition ease-out duration-200"
		x-transition:leave-start="opacity-100 scale-100"
		x-transition:leave-end="opacity-0 scale-75"
		x-cloak
		x-cloak 
	>
		<!-- video -->
		<div class="video" x-data="{ play: true, mute: false, subtitles: false }" x-init="$refs.video.onplaying = () => { play = true }; $refs.video.onended = () => { play = false }; $watch('play', (value) => {
			if (value) {
					$refs.video.play();
			} else {
					$refs.video.pause();
			}
	})">
			<figure class="video-inner" @click.outside="modalOpen = false" @keydown.escape.window="modalOpen = false">
				<video id="how-it-works-video" x-ignore ax-load="lazy" playsinline x-init="$watch('modalOpen', value => value ? $el.play() : $el.pause())" x-ref="video" @click="play = !play">
						<source src={howItWorksVideo} type="video/mp4"/>
						<track label="English" kind="subtitles" src={subs} srclang="en" x-show="subtitles" x-bind:default="subtitles">
				</video>
				<!-- Video controls -->
				<div id="video-controls" class="controls" data-state="hidden">
					<div @click="play = !play">
						<template x-if="!play">
							<Icon name="vid-play" class="control"/>
						</template>
						<template x-if="play">
							<Icon name="vid-pause" class="control"/>
						</template>
					</div>
					<button class="progress" class="control">
						<progress id="progress" value="0" min="0">
							<span id="progress-bar"></span>
						</progress>
					</button>
					<div @click="mute = !mute; $refs.video.muted = mute" class="mute">
						<template x-if="!mute">
							<Icon name="vol-on" class="control"/>
						</template>
						<template x-if="mute">
							<Icon name="vol-off" class="control"/>
						</template>
					</div>
					<div @click="subtitles = !subtitles; $refs.video.textTracks[0].mode = subtitles ? 'showing' : 'hidden'" class="subtitles">
						<div x-show="!subtitles" class="tooltip">
							<Icon name="subs-off" class="control"/>
							<span class="tooltiptext">Enable captions</span>
						</div>
						<div x-show="subtitles" class="tooltip">
							<Icon name="subs-on" class="control"/>
						</div>
					</div>
				</div>
				<!-- End of video controls -->
			</figure>
		</div>
		<!-- close button -->
		<button id="close-modal-button" class="button button-secondary" @click="modalOpen = false" aria-label="Close video">
			<span class="text">Close video</span>
			<span class="icon">
				<Icon name="close" size="16" />
			</span>
		</button>
	</div>	
</div>
</div>

JS

export default () => {
	
  return {
    init() {

      const heroVideo = document.getElementById('hero-video');
      const openModalButton = document.getElementById('open-modal-button');
      const closeModalButton = document.getElementById('close-modal-button');
      const modal = document.getElementById('modal');
      const header = document.getElementById('header');

      const disableScroll = () => {
        document.body.style.overflow = 'hidden';
        document.addEventListener('touchmove', preventScroll, { passive: false });
      };

      const enableScroll = () => {
        document.body.style.overflow = 'auto';
        document.removeEventListener('touchmove', preventScroll, { passive: false });
      };

      const preventScroll = (event) => {
        event.preventDefault();
      };

			//Open modal
      openModalButton.addEventListener('click', () => {
        heroVideo.pause();
        header.style.zIndex = '30'; 
        disableScroll(); 

				// Video progress bar
				const video = document.getElementById("how-it-works-video");
				const progress = document.getElementById("progress");
				const progressBar = document.getElementById("progress-bar");

				video.addEventListener("loadedmetadata", () => {
					progress.setAttribute("max", video.duration);
				});

				video.addEventListener("timeupdate", () => {
					progress.value = video.currentTime;
					progressBar.style.width = `${Math.floor(
						(video.currentTime * 100) / video.duration,
					)}%`;
				});

				video.addEventListener("timeupdate", () => {
					if (!progress.getAttribute("max"))
						progress.setAttribute("max", video.duration);
						progress.value = video.currentTime;
						progressBar.style.width = `${Math.floor(
							(video.currentTime * 100) / video.duration,
						)}%`;
				});

				progress.addEventListener("click", (e) => {
					const rect = progress.getBoundingClientRect();
					const pos = (e.pageX - rect.left) / progress.offsetWidth;
					video.currentTime = pos * video.duration;
				});

      });

			//Close modal with click on button
      closeModalButton.addEventListener('click', () => {
        heroVideo.play();
        header.style.zIndex = '100'; // Put back the original z-index when the modal is closed
        enableScroll();
      });

			//Close modal with click utside of modal area
      modal.addEventListener('click', (event) => {
        if (event.target === modal) {
          // Clicking outside the modal
          heroVideo.play();
          header.style.zIndex = '100'; // Put back the original z-index when clicking outside
          enableScroll(); // Enable scrolling when clicking outside the modal
        }
      });

		//Close modal by pressing ESC
      document.addEventListener('keydown', (event) => {
        if (event.key === 'Escape' && modal.classList.contains('open')) {
          heroVideo.play();
          header.style.zIndex = '100'; // Put back the original z-index when pressing Escape
          enableScroll(); 
        }
      });

    },
  };
};

CSS

.section-content {
	@apply col-span-full lg:col-start-2 lg:col-end-12 flex flex-col self-center px-4 md:px-6 lg:px-0 pb-14 lg:pb-0 z-30;

	.title {
		@apply uppercase text-[4rem] lg:text-[7.5rem] leading-[4.5rem] lg:leading-[6.9rem];
	}

	.section-copy {
		@apply max-w-[30rem] pb-14;

		p {
			@apply pb-0;
		}
	}

	.section-how-it-works {

		[x-cloak]{
			display: none !important;
		}

		#open-modal-button {
			.text {
				@apply text-white text-sm md:text-base;
			}

			.icon {
				@apply bg-white;

				svg {
					@apply text-black duration-500 ease-ferrum;
				}
			}

			&:hover {	
				svg {
					@apply animate-none scale-150;
				}
			}
		}

		.modal-backdrop {
			@apply fixed inset-0 z-[99999] bg-black bg-opacity-90 transition-opacity;
		}

		#modal {
			@apply fixed inset-0 z-[99999] md:px-6 py-6 text-center flex flex-col items-center justify-center;

			.video {
				@apply max-w-5xl mx-auto flex items-center;

				.video-inner {
					@apply w-full max-h-full shadow-2xl bg-black overflow-hidden border border-steel;

					video::cue {
						@apply font-karla text-white font-light text-sm md:text-[1.44rem] bg-transparent;
						text-shadow: 0px 0px 3px black;
					}

					.controls {
						@apply flex w-full h-[8%] bg-black pb-0 pt-[7px] md:pb-[7px] md:pt-3.5 px-6 md:px-8;

						.control {
							@apply cursor-pointer w-8 h-8 md:w-10 md:h-10;
						}

						.tooltip {
							@apply relative inline-block;

							.tooltiptext {
								@apply text-sm bg-steel w-[5rem] text-white text-center py-[5px] px-0 absolute bottom-[130%] left-[95%] -ml-[3.75rem] rounded-md z-10 invisible leading-tight;

								&::after {
									@apply absolute top-full left-1/2 -ml-[5px] border-solid border-[5px];
									content: "";
									border-color: rgb(51,51,51) transparent transparent transparent;
								}
							}

							&:hover .tooltiptext {
								@apply invisible lg:visible;
							}
						}

						.mute {
							@apply pr-1;
						}

						.subtitles {
							@apply pl-1;
						}

						.progress {
							@apply grow cursor-auto px-4;

							#progress {
								@apply w-full h-[4px] rounded-sm mb-[0.3rem];
							}
						}

						/* Fallback code */
						progress[value] {
							@apply bg-steel rounded-sm cursor-pointer;
						}

					
						progress[value]::-webkit-progress-bar {
							@apply bg-steel rounded-sm cursor-pointer;
						}

						progress[value]::-webkit-progress-value {
							@apply rounded-sm;
							background: linear-gradient(90deg, rgba(255,189,51,1) 0%, rgba(253,108,60,1) 33%, rgba(60,205,253,1) 66%, rgba(118,207,120,1) 100% );
						}

						progress[value]::-moz-progress-bar {
							@apply rounded-sm;
							background: linear-gradient(90deg, rgba(255,189,51,1) 0%, rgba(253,108,60,1) 33%, rgba(60,205,253,1) 66%, rgba(118,207,120,1) 100% );
						}
					}

				}
			}

			#close-modal-button {
				@apply pt-5 lg:pt-8 px-6 cursor-pointer border-none text-white;
				/* &:hover {
					@apply bg-black;
				} */

				.icon {
					@apply bg-steel w-8 h-8 md:w-10 md:h-10;

					svg {
						@apply text-white duration-500 ease-ferrum;
					}
				}

				&:hover {	
					svg {
						@apply animate-none scale-125;
					}
				}
			}
		}
	}
}

Thanks!

[ekwoka]

What's the interaction that you do with these?

[mmarcelino]

Hi @ekwoka! Thanks for replying, but I'm afraid I'm not sure I understand your question - would mind rephrasing? Thanks!

[ekwoka]

Like if I load this code up, what do you do? what seems to not be working for you? what are the steps I would take to see the behavior you are seeing as wrong?

Can you put this in a codepen?

You're also using a different data loader, which is likely where the actual problems come from.

[mmarcelino]

When you click the "See how it works" button a modal opens and a video should start playing automatically. You can then close the modal by clicking outside the modal or the "Close video" button.

All this works perfectly fine in Chrome and Safari both locally and in production and I've just realised it also does so in Firefox when I test it locally - but the video won't start playing when in production in Firefox only - the modal opens and closes, but nothing happens inside it, unless I refresh my page and then the video does start playing.

I've updated my code to include the JS I'm using as well.

Any suggestions...? Thank you again!

[mmarcelino]

When you click the "See how it works" button a modal opens and a video should start playing automatically. You can then close the modal by clicking outside the modal or the "Close video" button.

All this works perfectly fine in Chrome and Safari both locally and in production and I've just realised it also does so in Firefox when I test it locally - but the video won't start playing when in production in Firefox only - the modal opens and closes, but nothing happens inside it, unless I refresh my page and then the video does start playing.

I've updated my code to include the JS I'm using as well.

Any suggestions...? Thank you again!

[ekwoka]

Well, I'd start by actually using alpine for the logic, and not raw dom manipulation that alpine may fight with.

[mmarcelino]

Thank you for the suggestion, @ekwoka, but unfortunately my knowledge of Alpine is too limited, which makes it challenging for me to accomplish that. I see you mentioned "You're also using a different data loader, which is likely where the actual problems come from." Would you mind elaborating on that?

[ekwoka]

you have ax-load.

but what don't you know?

All your dom manipulations can just be x-bind and @event ....