'Safari CSS relative parent & relative child with pseudo selector does not match other browsers output

I am not looking for an answer to fix the code, moreso an answer or explanation as to why.

Safari will render children elements with a relative parent in a completely different place than other browsers show. If I change the child to be absolute, it will have some consistency.

Edit: After looking at iPhone 8+ Safari & Chrome apps, it shows broke on both. So maybe this is a issue at the OS level.

Figure 1: In-consistent code (we are primarily focused on the 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 Safari 14 Output

Chrome Output Chrome Output

Figure 2: Consistent code (same caret with red background)

https://codepen.io/treckstar_/pen/xxYxpBe

I also moved the element closer and made it visually centered; however, that had no affect on the ultimate issue.

.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;
}

Safari 14 Output (fixed)

htmlcsstwitter-bootstrapsafaricross-browser


Solution 1:[1]

You can try the -webkit-transform: translateZ(0);. Webkit is made to work for HTML5 on iOS.

.c-anchor-explore--toggle {
    font-size: 16px;
    font-weight: 700;
    padding: 7px 0px;
    position: relative;
    -webkit-transform: translateZ(0);
    margin-right: 40px;
}

.c-anchor-explore--caret {
    position: relative;
    right: -70px;
    top: 3px;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jamil Matheny

Related Questions