I'm not seeking a specific fix for the code, but rather an explanation as to why it behaves this way.
In Safari, children elements with a relative parent appear in a different position compared to other browsers. Changing the child to absolute positioning can bring some consistency.
Edit: Checking Safari & Chrome on iPhone 8+, both display incorrectly. This might be an issue at the OS level.
Figure 1: Inconsistent Design (focus on caret with red background)
https://codepen.io/treckstar_/pen/eYVYyjK
.c-anchor-explore--toggle {
font-size: 16px;
font-weight: 700;
padding: 7px 0px;
position: relative;
}
.c-anchor-explore--caret {
position: relative;
right: -70px;
}
Safari 14 Output https://i.sstatic.net/84sn0.png
Chrome Output https://i.sstatic.net/0ZmH3.png
Figure 2: Consistent Design (same caret with red background)
https://codepen.io/treckstar_/pen/xxYxpBe
I also adjusted the element's position and centered visually, yet the issue persisted.
.c-anchor-explore--toggle {
font-size: 16px;
font-weight: 700;
padding: 7px 0px;
position: relative;
-webkit-appearance: none; /* remove border around safari */
margin-right: 40px; /* match the right: -40px; to make sure it looks centered */
}
.c-anchor-explore--caret {
position: absolute; /* cannot be relative as Safari will not render correctly */
right: -40px;
top: 3px;
}