iOS CSS Clamp 和 Transforms 坏了答案

【问题标题】：iOS CSS Clamp and Transforms brokeniOS CSS Clamp 和 Transforms 坏了
【发布时间】：2022-01-14 10:22:15
【问题描述】：

在我在 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 的支持。

编辑：

刚刚发现这也发生在适用于 iOS 的 chrome 上。

【问题讨论】：

标签： css vue.js mobile-safari

【解决方案1】：

据我所知，钳位问题没有好的解决方案，但可以通过以下方式解决：

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%);

【讨论】：