Why isn't my custom liquid slider working on Safari?

Store Design
, , , ,

Topic summary

A user is experiencing a browser compatibility issue with a custom liquid slider section on their Shopify store’s homepage. The slider displays three images with descriptions and functions correctly in Google Chrome but fails to work in Safari.

Technical Details:

  • Store uses the Dawn theme
  • Custom section built with HTML radio inputs and CSS transforms
  • Uses translate3d transforms for slide animations
  • Includes responsive styling with media queries

Current Status:

  • Issue marked as urgent
  • Screenshot provided showing the intended design
  • Full HTML/CSS code shared for troubleshooting
  • No solutions or responses posted yet

Likely Cause:
Safari-specific CSS rendering differences, particularly with transform properties or radio input styling, may be preventing the slider from functioning properly. The discussion remains open with no resolution.

Summarized with AI on November 19. AI used: claude-sonnet-4-5-20250929.
1

hello.

my store url is- https://everybodies.com/

password- relisi

theme- dawn

I added a custom liquid section on the homepage which is a slider of 3 images with their descriptions. the code is working on google chrome but not on safari :confused: please help urgently.

Screenshot 2023-06-28 at 7.00.16 PM.png
Screenshot 2023-06-28 at 7.00.16 PM.png2880×1604 193 KB

code is below-

WHEY PROTEIN
Contains whey protein isolate (milk), natural flavouring, thickener (xanthan gum), sweetener (steviol glycosides).

WHEY PROTEIN
Contains whey protein isolate (milk), natural flavouring, thickener (xanthan gum), sweetener (steviol glycosides).

WHEY PROTEIN
Contains whey protein isolate (milk), natural flavouring, thickener (xanthan gum), sweetener (steviol glycosides).

html, body { overflow-x: hidden !important; }

[type=radio] {
display: none;
}

#slider {
height: 100vh;
position: relative;
perspective: 1000px;
transform-style: preserve-3d;
}

#slider .team-card {
margin: auto;
width: 50%;
height: auto;
position: absolute;
left: 0; right: 0;
cursor: pointer;
transition: transform 0.4s ease;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
border-radius: 10px;
}

#s1:checked ~ #slide3, #s2:checked ~ #slide1,
#s3:checked ~ #slide2 {
transform: translate3d(-80%,0,-300px);
}

#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3 {
transform: translate3d(0,0,0);
}

#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide1 {
transform: translate3d(80%,0,-300px);
}

.team-card img {
width: 100%;
height: 500px;
object-fit: contain;
object-position: center;
border-radius: 10px 10px 0 0;
}

.team-content {
padding: 30px;
background-color: #e1e6e9;
border-radius: 0 0 10px 10px;
}

.team-content p {
text-align: center;
}

@media (max-width: 500px) {

#slider .team-card {
margin: auto;
width: 70%;
height: auto;
position: absolute;
left: 0; right: 0;
cursor: pointer;
transition: transform 0.4s ease;
background-size: contain;
background-position: center center;
background-repeat: no-repeat;
}

.team-card img {
height: 400px;
}

.team-content {
padding: 15px;
}

.team-content p {
font-size: 12px;
margin-bottom: 10px;
}

#s1:checked ~ #slide3, #s2:checked ~ #slide1,
#s3:checked ~ #slide2 {
transform: translate3d(-55%,0,-400px);
}

#s1:checked ~ #slide1, #s2:checked ~ #slide2,
#s3:checked ~ #slide3 {
transform: translate3d(0,0,100px);
}

#s1:checked ~ #slide2, #s2:checked ~ #slide3,
#s3:checked ~ #slide1 {
transform: translate3d(55%,0,-400px);
}

}