We are using Dawn 11.0.0 theme and have a full width slider that we are having issues with in Safari. When the slide first loads, it looks correct, but upon advancing, there is a blank area of slide 2. Then when it goes back to Slide 1, then there is a blank spot on Slide 1, and when it goes to Slide 2, more issues. Would someone be able to take a look at my slider and let me know what might be happening? Not sure how to fix it. When we turned it on last week, it was working. It seems that the slider IDs are still the same as they were then. We had to modify some of the css so that the slide image would appear only on one half of the slide (so it would not be blocked by text). We also gave the slider a max-width so that the contents stay within the boxed width of the body of the site. Here is the additional CSS:
.banner__media.media { background: transparent !important; }
#Slide-template--21951783862589__slideshow_QbNVEz-1 { background: #FAF8F8 !important; overflow: hidden !important;}
#Slide-template--21951783862589__slideshow_QbNVEz-2 { background: #00597F !important; color: #ffffff !important; overflow: hidden !important; }
#Slide-template--21951783862589__slideshow_QbNVEz-2 p { color: rgba(var(--color-foreground), 1) !important; }
#Slide-template--21951783862589__slideshow_QbNVEz-2 .button--primary {border:2px solid #ffffff; height: 51px;
border-radius: 4px; font-family: 'greycliff-cf'; color: #ffffff !important; cursor: pointer; text-decoration: none; background-color: transparent; font-size: 1.5rem; font-weight: 700; padding: 1rem 3rem; transition: all 0.3s ease-in-out;}
#Slide-template--21951783862589__slideshow_QbNVEz-2 .button--primary:hover { border: 2px solid #0B75E0; background: #0B75E0; color: #FFFFFF !important; }
In order to get the slide contents to stay within the frame, I added some javascript that adds a maxwidthset div to the slider, so that the max width can be set to 1200px. This is the code:
<script type="text/javascript">
// Get all elements with class "slideshow__slide"
var slideshowSlides = document.getElementsByClassName("slideshow__slide");
// Loop through each slideshow slide
for (var i = 0; i < slideshowSlides.length; i++) {
var slide = slideshowSlides[i];
// Get the inner divs "slideshow__media" and "banner__content"
var mediaDiv = slide.getElementsByClassName("slideshow__media")[0];
var contentDiv = slide.getElementsByClassName("banner__content")[0];
// Create a new wrapper div with class "maxwidthset"
var wrapperDiv = document.createElement("div");
wrapperDiv.className = "maxwidthset";
// Set the maximum width of the "maxwidthset" div to 1200px
wrapperDiv.style.maxWidth = "1200px";
// Append the "slideshow__media" and "banner__content" divs to the wrapper div
wrapperDiv.appendChild(mediaDiv.cloneNode(true));
wrapperDiv.appendChild(contentDiv.cloneNode(true));
// Clear the inner HTML of the slide
slide.innerHTML = "";
// Append the wrapper div to the slide
slide.appendChild(wrapperDiv);
}</script>
I have removed this code to see if it was causing the issue, but it did not make a difference in the performance of the slider.
Here is a preview link of our site: https://excp8f70hceu3e47-82858082621.shopifypreview.com
The issue seems to only be occurring in Safari. If someone could help, I would be so grateful. Thank you!
