6 replies · opened Apr 6, 2023
The animated .mfp-preloader spinner when loading Lightbox items, portfolio.html for example, is not centered and I presume this is a bug? Turning off "animation" style in web inspector centers .mfp-preloader spinner, but not sure why.
Hello,
Thanks for reporting this and we have tried checking many pages but it appears to be working fine for us. Can you please let us know which Item specifically you are facing this on so that we can run further tests. Additionally, do you see any scrollbars when the Lightbox is loading the content? Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Go to portfolio.html and add:
.mfp-preloader {display:block!important}
.mfp-content {display:none!important}
I have also attached latest portfolio.html with these changes.
When clicking either image or gallery lightboxes within the portfolio, you can see the spinner off center.
Hello,
Thanks for more details. We have checked this and it appears to be working fine for us. We will run more tests and get back to you on this. Thanks for your Patience.
Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.
Attached is screenshot of test file showing not centered.
Thank You so much for more details on this. We are checking this further.
Thanks for your Kind Patience.
Hello,
We have fixed this! Simply find the following code in the .mfp-preloader CSS Selector in the style.css File:
[ch_pre type="css"]animation: spin 2s infinite linear;[/ch_pre]
and move it inside the .mfp-container:not(.mfp-s-error) .mfp-preloader::before CSS Selector.
The Final Code should look like this:
[ch_pre type="css"].mfp-preloader {
color: var(--cnvs-mfp-controls-text-color);
z-index: calc(var(--cnvs-mfp-z-index-base) + 4);
position: absolute;
top: 50%;
left: 50%;
width: var(--cnvs-mfp-preloader-size);
height: var(--cnvs-mfp-preloader-size);
font-size: var(--cnvs-mfp-preloader-size);
line-height: 1;
text-align: center;
transform: translate(-50%, -50%);
font-family: "bootstrap-icons";
line-height: inherit;
}
.mfp-preloader a {
color: var(--cnvs-mfp-controls-text-color);
}
.mfp-preloader a:hover {
color: var(--cnvs-mfp-controls-text-color-hover);
}
.mfp-container:not(.mfp-s-error) .mfp-preloader::before {
display: block;
width: 100%;
height: 100%;
line-height: 1;
content: "\f130";
animation: spin 2s infinite linear;
}[/ch_pre]
This will definitely fix the issue and an update will be released shortly. Hope this Helps!
Let us know if we can help you with anything else or if you find any further issues.
Have the same question, or something new?
Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.
Reply on the dashboard