'Not respecting z-index on safari with position: sticky
I'm been having some problems with my site redesign, I have a section of goals in the case study that is sticky and once you pass an image that goal gets crossed as done. As I'm using full-width images I wanted the goals section go underneath and as you see it again when scrolling the goal is already crossed, it works great on chrome and firefox but not in safari. Is weird because when I use the web inspector the element in safari behaves as it should for a moment and it goes under the image.
Does anyone have an idea of what can be?
Solution 1:[1]
This must be a Safari bug with their implementation of position: sticky
I've reported this as a bug to Apple - maybe do the same?
Solution 2:[2]
adding transform: translate3d(0,0,0); to the non sticky div seems to fix it in Safari
Solution 3:[3]
This Safari-bug is really weird, because the bug disappeared once I open the Safari DevTools.
@stormdrain: Where did you report this issue to Apple - is there a link where this bug is documented?
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 | stormdrain |
| Solution 2 | Neil Creagh |
| Solution 3 | Florian |