Bug 回报：WebP格式图片在Apple平台下存在兼容性问题 & 360浏览器 on MacOS 解析JS出错

201206030 commented 2 years ago

报告前须知

[v] 我确认该Bug是可复现的，我会根据下面的模板提供完整详尽的复现步骤
[v] 我确认已认真阅读 ReadMe.md 和文档，确认描述的内容有误或是不能解决我的问题
[v] 我已知晓如果没有认真阅读且勾选这里所有的条目，或是没有使用此模板认真详细地描述问题，是对彼此时间的浪费，我的 issue 可能会被无解释关闭

对Bug的描述:

在 MacOS 系统的360 极速浏览器或Safari 浏览器中打开博客系统的列表页会存在图片不显示的现象，Windows 平台不知道会不会也有这种兼容问题

复现Bug的方法:

可以使用如下的方案进行复现:

  1. 前往 MacOS 系统的 360 极速浏览器或 Safari 浏览器
  2. 打开 https://candinya.com/categories/教程文档/ 链接
  3. 360 极速浏览器中的随机图片不显示，Safari 浏览器中 webp 图片不显示
  4. 如果把 webp 格式的图片换成其它格式，Safari 浏览器中可以正常显示
  5. 打开 360 极速浏览器的开发者工具可以看到控制台报错

期望的行为:

期望兼容更多的浏览器

相关的截图:
运行环境(如果该Bug的产生和环境有关，例如浏览器不兼容导致):
- 操作系统: [MacOS 10.15.7]
- 浏览器: [Safari 13.1.3, 360极速浏览器 12.2.1662.0]
您的配置文件:
补充内容:

ArcticLampyrid commented 2 years ago

很遗憾，Safari 系列浏览器是鲜有的不支持 WebP 格式的现代浏览器，~考虑到 WebP 在编码效果上的优势，我们更建议您更换浏览器~

For this project

可能需要 fallback 机制

Workaround

可以使用自定义随机图片源并指向非 WebP 图片源（可以自行维护）的方式处理

201206030 commented 2 years ago

很遗憾，Safari 系列浏览器是鲜有的不支持 WebP 格式的现代浏览器，~考虑到 WebP 在编码效果上的优势，我们更建议您更换浏览器~

For this project

可能需要 fallback 机制

Workaround

可以使用自定义随机图片源并指向非 WebP 图片源（可以自行维护）的方式处理

大佬，Safari 系列浏览器的图片问题我可以自己解决，有空看下 360 浏览器的问题，这个是 js 直接报错了

ArcticLampyrid commented 2 years ago

有空看下 360 浏览器的问题，这个是 js 直接报错了

麻烦给一下内核类型及内核版本号

201206030 commented 2 years ago

有空看下 360 浏览器的问题，这个是 js 直接报错了

麻烦给一下内核类型及内核版本号

ArcticLampyrid commented 2 years ago

~Chromium 78 发布于 2019 年，出于安全性考虑，建议您升级浏览器~ 好的，会适当检查一下脚本的兼容性问题的

201206030 commented 2 years ago

~Chromium 78 发布于 2019 年，出于安全性考虑，建议您升级浏览器~ 好的，会适当检查一下脚本的兼容性问题的

大佬有空看看就行，主要是 360 浏览器的用户国内还挺多的

Candinya commented 2 years ago

报错的是因为 js 脚本里用到了 ?. 这个可选链操作符，用以简化连续可能为 undefined 的参数表达式（拆开的写法兼容性较好，但比较冗长），在 Chromium 内核 80 版本开始受到支持，旧内核浏览器会出现执行错误，关于该操作符的更多信息可以参见 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Optional_chaining

ArcticLampyrid commented 2 years ago

大佬有空看看就行，主要是 360 浏览器的用户国内还挺多的

master 分支已经配置 babel，现在就js语法层面而言，应当已经兼容低版本内核

{
  "browserslist": [
    "last 2 versions",
    "> 1%",
    "Chrome >= 30",
    "Firefox >= 30",
    "ie >= 9",
    "Safari >= 8"
  ]
}

201206030 commented 2 years ago

收到，大佬们幸苦了！

ZHANQILU commented 2 years ago

大佬，封面图片换成自己的，配置文件也更改了，但还是加载不出来

Candinya commented 2 years ago

大佬，封面图片换成自己的，配置文件也更改了，但还是加载不出来

加载不出来是指的依然是默认图片还是说无法加载图片（默认使用的 jsdelivr 连通性不太好，可能会有图片无法加载的情况）呢，修改的配置文件指的是否是将 jsconfig.main.cover.baseUrl 修改成了您需要的配置（例如使用本地文件的话类似于 "/images/thumb/" 这样）呢

ZHANQILU commented 2 years ago

无法加载图片我就直接在/images/thumb/文件夹里面传了20张我的图片，在config.kratos-rebirth.yml 里面把filenameTemplate: 'thumb{no}.webp'改成了thumb_{no}.jpg

Candinya commented 2 years ago

无法加载图片我就直接在/images/thumb/文件夹里面传了20张我的图片，在config.kratos-rebirth.yml 里面把filenameTemplate: 'thumb{no}.webp'改成了thumb_{no}.jpg

还需要再顺带修改一下 jsconfig.main.cover.baseUrl 这个字段哦，可以按照上面一条回复来修改一下 https://github.com/Candinya/Kratos-Rebirth/blob/master/_config.yml#L204

ZHANQILU commented 2 years ago

可以啦，谢谢大佬❤❤❤😙😙😙

Candinya / Kratos-Rebirth