1

In this website, I've created a div with a 50% border radius and an outline to make it a circle. It displays correctly on desktop browsers such as Chrome and Firefox, but is still a square on mobile Safari. Is there any way to fix this? Thanks for any help.

Desktop view:

Displaying Correctly

Mobile View:

Displaying Incorrectly

<div class="circle" bind:this={circle.element}>
    <div class="dot" bind:this={dots[0].element} on:pointerdown={() => dots[0].pressed = true} ></div>
    <div class="dot" bind:this={dots[1].element} on:pointerdown={() => dots[1].pressed = true} ></div>
</div>

.circle {
    height: var(--circleDiameter);
    width: var(--circleDiameter);
    outline: var(--borderRadius) solid var(--tertiary);
    outline-offset: calc(var(--borderRadius) * -0.5);
    border-radius: 50%;
    position: relative;
    margin: calc(var(--borderRadius) /2 + var(--dotDiameter) / 2);
}

.dot {
    height: var(--dotDiameter);
    width: var(--dotDiameter);
    border: var(--borderRadius) solid var(--theme);
    border-radius: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
    background-color: var(--secondary);
}

.circle, .dot {
    touch-action: none
}
Lee Taylor
  • 7,761
  • 16
  • 33
  • 49
zsrobinson
  • 38
  • 4

1 Answers1

-1

For border radius on safari, you have to use "-webkit-border-radius". Also you may want to refer to this: https://stackoverflow.com/a/6810937/16299280

Thenu Kaluarachchi
  • 98
  • 8