Hello, I have created three different modals on the page linked below where each presents a different project. I also have a ‘smooth scrolling’ effect via a full page wrapper and custom code. Previously, the modals were working as intended, however now they have stopped scrolling when opened on my published site. Further, the third modal ‘Hey Reiki Lady’, (which is technically the fourth modal when you look at the navigator because I have hidden one) keeps rearranging the content whenever I open the modal on the published site. Does anyone know how I can solve this?
I took a look at your read-only link, and ive noticed that when i open the “Hey Reiki Lady” modal it actually opens up two modals, could this be the issue? Maybe it’s pushing content around in order to fit in.
Usually when content changes automatically it is because some element’s size propriety is set to auto and that makes it change its positioning according to available space on screen.
Also, ive noticed the “Hey Reiki Lady” modal’s close button does not close the modal.
@Kimmy Hi, thanks for your reply. Yes I noticed that happening sometimes too, but I can’t seem to replicate it on a regular basis, sometimes it shows up and sometimes not. I’ve checked out the navigator to see if I somehow copy pasted one of the modals by accident, but I can’t spot anything strange, do you have any ideas?
I was aware of the close button not working already, just another problem that cropped up - it was working fine before, and now I need spend time investigating what went wrong
All you need to do is re-check your triggers, if one button is opening two different modals, then something went wrong when you applied the click triggers. The close modal button should be an easy fix as well.
You can create a new test page and re-build a new, simple modal from the ground up and see if it works properly, then compare your test modal to your existing modals, and you might notice some differences.
Hi @Kimmy, thank you again for your reply. I’ve just gone through all of my triggers and they all match up correctly to each modal respectively, at least from what I see. I did notice that the only modal that becomes ‘repeated’ and opened underneath is the first one - Mollie Keane. If, on loading the page, I open the second or the third modal first, then only these single modals open. But once I have opened the first modal, it then always opens underneath the second or third modal when I open them. It really confuses me because if it’s not the triggers, then what else could be causing it to function in such a way?
Ah, I have just solved it. There was a bug with the ‘hide/show’ animation for the first modal, so it was staying on the page once it had been opened. I just deleted the animation and re-did it, and now it works properly. Thank you for your help @Kimmy
You can also add a load page trigger that resets all of your modals when the page loads. This would be a hide/show attribute set to display:none with the tick box “set as initial state” turned on.
Hi @Kimmy, perhaps you can help - my modals have stopped scrolling. They open and close fine, but they no longer scroll. If you go to the-berg-design.webflow.io you can see what I mean. Thank you
Try adding content to the page where the modal is, but add the content below the modal. The point is to force the page to have a scroll bar, then test the modal and see if it scrolls now that the page itself is scrollable. Just add a div with a lot of height so that the page has to scroll.
Quick note: I checked your website on my phone, and maybe you need to double check some elements and how they’re distributed, because i noticed things like stretched out images (like, a lot of vertical stretch going on).
I don’t know if you do this, or maybe you do, but it’s good practice to test things out on the live version of your website in different devices like tablets or phones or computers/laptops with different screen sizes. Sometimes the preview function in the designer can be… uhm… sorta “misleading”…
I just tested out adding content. I think I tested it correctly - I have a modal container (which provides the background of the modal) and the modal itself (which contains the content) as you may have noticed, so I added the test div below the actual modal, rather than the container. It still didn’t let me scroll though unfortunately.
Quick note: I checked your website on my phone, and maybe you need to double check some elements and how they’re distributed, because i noticed things like stretched out images (like, a lot of vertical stretch going on).
Oh yes I knew about that, I haven’t yet finished optimising the site for mobile yet as the portfolio page has been giving me headaches! But thank you for pointing it out nonetheless
What i meant was adding content to the page where the modal is, in this case it would be the “portfolio” page i believe, so that the page then scrolls.
The test was to have a scrollable page, then open the modal and see if by scrolling the page, the rest of the modal content would show up.
Ah, my apologies, i didn’t noticed that it was scrollable before clicking any name, my bad.
When i open the portfolio page, if i scroll down, there’s tons of lag while the page scrolls down, it’s like my computer turns into a potato and takes like 30 secs to scroll to the bottom of the page.
Regarding your issue, try changing the “Menu overlay div” element from “fixed” to “absolute”.
Usually fixed elements are not scrollable, so beware when using that setting.
Ah, my apologies, i didn’t noticed that it was scrollable before clicking any name, my bad.
No worries. It should also be scrollable when you click on the names too though. It goes from the gradient background when you open the page, to a coloured background depending on which name you click on, and then finally the modal should move upwards when you click on the image of the website.
Oh that’s interesting. When I view the site on Safari, there’s no lag, but on Chrome there’s a ton. Conversely, some of the other animations, like the opening and closing of the menu, lags on Safari but not on Chrome . Have you come across anything like that before? This is my first site on Webflow and it just seems like problems just continually manifest themselves every time I think I have fixed something else.
Ok I just tried that, however now also the portfolio page itself won’t scroll (in addition to the modals).
Having smooth scrolls on a page makes things tricky, some browsers go along with it, other browsers don’t give a flying duck about them and just lag the holy moly out of the computer. So it’s a thing to be careful with. Me personally, i don’t like smooth scrolling very much, because i feel like i’m not in charge, but that’s just me.
Regarding your issue, it seems that the problem appears once you click any name. What’s even weirder is that it doesn’t happen in the preview, rather it only happens in the live version of the website.
I’m sure this is probably a rather “simple” fix, but today i’m just gazed, imma tag @vincent and @QA_Brandon, maybe they can help, they’re masters of this dark magic.
Oh that’s strange. I didn’t see much of a difference between Chrome and Safari but I haven’t tested all browsers so maybe I’m missing one that doesn’t handle the smooth scrolling well. How does this site work on your browser - https://www.loevenmorcel.com?
I had other problems with the site elsewhere, and Webflow said that if there is a problem that only presents on the live site, and not on the preview, it means that it has something to do with the custom code being used.
I noticed that I had some other code on the portfolio page, but I don’t even remember what it does Does it mean anything to you?:
That’s you and others, a pretty large group that’s hard to define, we could say the group for which the concept of accessibility exists.
When you say you feel you’re not in charge, maybe that’s not solely because of your taste in motion, but also because your brain don’t handle or feel great with too many motion.
iOS popularized access to a large variety of accessibility measures addressing various issue. One of them is “Reduced motion”. When activated, most motion in transitions is removed. I used this setting during the 2 years of iOS7 and iOS8 because the transition between the dashboard and the apps was too long, too laggy, to invasive for my taste. Like you, I was feeling I was losing control.
Since Chrome 74, reduced motion can be set as a preferrence, and using a specific media query, you can make sure to well treat visitors who have turned this setting on.
@media screen and (prefers-reduced-motion: reduce){ }
Webflow has put a lot of effort lately in addressing many aspects of accessibility. There’s actually a dedicated team for it. I am pretty sure we will be able to use Reduced Motion in Webflow some day soon.
