Safari兼容性问题(macOS与iOS)

记录项目开发过程中遇到的一些Safari兼容性问题。

  • Safari下overflow:hidden + border-radius失效

Safari下overflow:hidden + border-radius失效

Safari下,父元素设置overflow: hidden + border-radius,子元素hover放大时,父元素border-radius的限制无效:

See the Pen Untitled by ly023 (@ly023) on CodePen.

https://stackoverflow.com/questions/49066011/overflow-hidden-with-border-radius-not-working-on-safari

解决方法:在设置overflow: hidden的元素上添加transform: translateZ(0);

See the Pen Safari下overflow:hidden + border-radius兼容问题解决方案 by ly023 (@ly023) on CodePen.