Android 上的 webkit-box-reflect 错误

发布于 2025-01-07 23:30:13 字数 634 浏览 0 评论 0原文

我正在尝试在移动 webview 应用程序上添加反射（android 和 ios：仅适用于 webkit）。我实现了一个 webkit-box-reflect，就像我在 stackoverflow 等不错的网站上看到的那样。

"-webkit-box-reflect: below -14px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));"

我在android上得到了 android Behaviour

在所有其他 webkit 上都有类似的东西 chrome Behaviour

正如你在 Android 上看到的，没有反射，因为它没有被遮罩，但它只是将渐变放在上面反射的图像。（似乎是 webkit 移动设备上的掩码错误）。我可以轻松地放置白色（绿色）以外的另一种颜色并反转方向，但我需要后面的图像而不是纯背景。

有人有主意吗？我看到的所有网站都没有提到 Android 或者只是在纯背景上展示他们的作品......

原文

I'm trying to add reflection on a mobile webview application (android and ios : so webkit only). I implemented a webkit-box-reflect like I saw on pretty good sites including stackoverflow.

"-webkit-box-reflect: below -14px -webkit-gradient(linear, left top, left bottom, from(transparent), to(white));"

I obtain that on android
android behaviour

And something like that on all others webkit
chrome behaviour

As you can see on the android, there is no reflexion as it is not masked but it just put the gradient on the refected image. (seems to be a mask bug on webkit mobile). I could easily put another color than white (green) and inverse the orientation, but I need an image behind and not a plain background.

Do someone have an idea? all sites I saw don't mention android or just show their work on plain background...

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

嘿嘿嘿 2025-01-14 23:30:13

Android 浏览器不支持 webkit 渐变作为 box-reflect 上的遮罩。正如 Ali.MD 所指出的，您可以使用 PNG 图像作为蒙版。

为了避免添加另一个 HTTP 请求，您还可以使用 http:// websemantics.co.uk/online_tools/image_to_data_uri_convertor/：

img {
  -webkit-box-reflect: below 0 
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAyCAYAAACUEBHwAAAAIklEQVQ4jWP8//8/AzpgwhAZFRwVHBUctIIsDAwMXFQWBAAW4QORoT0UUQAAAABJRU5ErkJggg==);
}

The Android browser doesn't support webkit gradients as masks on box-reflects. As Ali.MD noted, you can use PNG images for the masks.

To avoid adding another HTTP request, you can also convert the PNG to a Data URI with something like http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/:

img {
  -webkit-box-reflect: below 0 
  url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAyCAYAAACUEBHwAAAAIklEQVQ4jWP8//8/AzpgwhAZFRwVHBUctIIsDAwMXFQWBAAW4QORoT0UUQAAAABJRU5ErkJggg==);
}

回复收藏 0 原文