iOS CSS Clamp 和 Transforms 损坏

Question

我在 Vue ^3.0.0 中为一个 API 开发了一个小前端，我运行遇到了这个问题，在我部署它之后，我开始收到人们的抱怨说该网站没有'不能在手机上工作。我知道它必须是 safari，所以我将它加载到一个 iPad 上，我躺在那里，是的，它绝对摧毁了这个网站。 This 是网站。我已经在 iOS12.5.5 设备上对此进行了测试，问题也发生在 iOS15.1 设备上。

CSS 属性如：

width: clamp(325px, 30vmax, 575px);
height: clamp(40px, 3vmax, 57.5px);

将发出无效的属性值警告（并且根本不起作用），除非我将它们更改为：

min-width: 325px;
width: 30vmax;
max-width: 575px;
min-height: 40px;
height: 3vmax;
max-height: 57.5px;

我觉得这很荒谬，因为我测试过的所有其他浏览器都运行良好。最大的问题是我也在字体上使用了这些钳制函数，所以它们就永远坏了。

此外，您可能会注意到，例如，搜索栏内的占位符文本在 Safari 浏览器中根本不居中。我将这个项目绝对居中，因为字体本身是偏离中心的，而且据我所知，它只在 safari 上中断。这是我用来居中的 ccs:

input {
  position: relative
}

input::placeholder {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, calc(-50% + 2px));
}

这实际上让我很沮丧，我不明白为什么一开始就有差异，为什么没有其他人抱怨这个，这让我想完全放弃对 Safari 的支持。

编辑：

也刚刚发现 chrome 上 iOS 也会发生这种情况。

Answer 1

clamp的问题据我所知没有很好的解决方法，但是可以通过以下方式解决：

iOS 设备/iOS 的移动浏览器难以使用钳位方法，但有一种解决方法/后备方案在大多数情况下都有效。对我来说，它并没有完全解决问题，因为它们的行为并不相同。但是如果你有钳位功能

clamp(a, b, c)

您可以使用以下解决方法：

max(a, min(b, c))

因此对于宽度和高度值，请使用如下内容：

width: max(325px, min(30vmax, 575px));
width: clamp(325px, 30vmax, 575px);
height: max(40px, min(3vmax, 57.5px));
height: clamp(40px, 3vmax, 57.5px);

这也适用于字体等其他属性

input::placeholder 元素中的转换问题是我无法修复的，所以我放弃了它，即使在尝试使用之后也是如此：

-o-transform: translate(-50%, -50%);

iOS CSS Clamp 和 Transforms 损坏

iOS CSS Clamp and Transforms broken

css

mobile-safari

vue.js