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:
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!