From 37e2c9fa0bd93abdd469eaa20a5970a2980f1893 Mon Sep 17 00:00:00 2001 From: the1812 Date: Sun, 16 Jun 2019 11:38:39 +0800 Subject: [PATCH] Update README --- README.md | 10 +++++++++- install-tutorial.en-US.md | 25 ++++++++++++++----------- 2 files changed, 23 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 7f3e150d3..545a7b2cd 100644 --- a/README.md +++ b/README.md @@ -355,17 +355,25 @@ ## 浏览器 > ⚠ 不保证脚本能在["套壳类浏览器"](https://www.jianshu.com/p/67d790a8f221)中完美运行. -### Chrome / Edge (Chromium) +### Chrome - 背景模糊效果([backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter))需要手动在`chrome://flags/#enable-experimental-web-platform-features`中开启. (Edge要把`chrome`换成`edge`) - 含有背景模糊效果的动画有掉帧现象. - 在Chrome ≥ 73版中, 如果您的屏幕DPI缩放大于100%, 或者改动了页面缩放倍数, 则模糊效果区域会错位. 详见[Chromium Issue #942910](https://bugs.chromium.org/p/chromium/issues/detail?id=942910). + +### Edge (Chromium) +- 滑条控件(`input[type='range']`)会有一段异常的黑色. +- 背景模糊效果似乎不会计算后面的视频, 所以`模糊视频控制栏背景`开启了也没有什么效果. + ### Firefox - 背景模糊效果无效, 详见[Bugzilla #1178765](https://bugzilla.mozilla.org/show_bug.cgi?id=1178765). - 触摸调整的进度预览有弹跳现象.(源自CSS `transition`. 短时间内总是从原数值开始变化, 而不是当前数值) + ### Safari - 尚未在Safari中测试.(流下了贫穷的泪水 + ### Edge (UWP) [**停止支持**] - 请使用以上列出的浏览器, 或换用 [Chromium 内核的 Edge](https://microsoftedgeinsider.com/). +- Chromium 内核的 Edge 可以通过特殊手段启用中文界面, 网上搜一下就有, 或者也可以参考这篇 [Gist](https://gist.github.com/the1812/bd5c3edabd61b03696428fcfde53d74f). (需要梯子) **喜欢的话就点个⭐Star吧(°∀°)ノ** diff --git a/install-tutorial.en-US.md b/install-tutorial.en-US.md index bb72bcc73..1e6b0b3c4 100644 --- a/install-tutorial.en-US.md +++ b/install-tutorial.en-US.md @@ -4,21 +4,24 @@ This tutorial will help you install Bilibili-Evolved in your browser. ## 1. Before install Please check the compatibility information below to make sure your browser is compatible with Bilibili-Evolved. -> In short, Chrome, Edge (Chromium), Firefox and Safari are supported well. Most of attentions listed below won't affect functionalities. Doesn't support Edge (UWP). +> In short, Chrome, Edge (Chromium), Firefox and Safari are supported well. Most of the attention listed below won't affect functionalities. Doesn't support Edge (UWP). -### Chrome / Edge (Chromium) +### Chrome - To use background blur effect ([backdrop-filter](https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter)), you need enable it manually in `chrome://flags/#enable-experimental-web-platform-features`. (For Edge, change `chrome` to `edge`) - Background blur effect may cause frame drops in animation. -- If your Chrome version is ≥ 73, and screen DPI / page zoom is larger than 100%, the background blur effect will display incorrectly. See [Chromium Issue #942910](https://bugs.chromium.org/p/chromium/issues/detail?id=942910) for more information. +- If your Chrome version is ≥ 73, and screen DPI/page zoom is larger than 100%, the background blur effect will display incorrectly. See [Chromium Issue #942910](https://bugs.chromium.org/p/chromium/issues/detail?id=942910) for more information. +### Edge (Chromium) +- Slider (`input[type='range']`) has a strange black bar. +- Background blur effect seems not working with videos. So `Background blur for video controls` will have no effect. ### Firefox -- Background blur effect is not supported, see [Bugzilla #1178765](https://bugzilla.mozilla.org/show_bug.cgi?id=1178765) for more information. +- The background blur effect is not supported, see [Bugzilla #1178765](https://bugzilla.mozilla.org/show_bug.cgi?id=1178765) for more information. - There are some animation issues when using touch gestures. (Caused by CSS `transition`. Property value always transits from its initial value rather than current value) ### Safari - Not tested in Safari. (I don't own a Mac) ### Edge (UWP) [**Stopped supporting**] -- Please use browsers listed above. Or you can try [Chromium-based Edge](https://microsoftedgeinsider.com/). +- Please use the browsers listed above. Or you can try [Chromium-based Edge](https://microsoftedgeinsider.com/). -In this tutorial, I'll use Chrome as example: +In this tutorial, I'll use Chrome as an example: ![Chrome](images/original/chrome.en-US.png) @@ -29,8 +32,8 @@ Bilibili-Evolved is delivered as JavaScript code snippets, a user script manager Supported managers: [Tampermonkey](https://tampermonkey.net/), [Violentmonkey](https://violentmonkey.github.io/). -Choose one you like and click the link to visit its homepage, or get it in your browser's extension store. -> You may know another manager called Greasemonkey, unfortunately it's not supported. +Choose the one you like and click the link to visit its homepage, or get it in your browser's extension store. +> You may know another manager called Greasemonkey, unfortunately, it's not supported. e.g. Install Tampermonkey from Chrome Web Store @@ -53,16 +56,16 @@ e.g. Install the Offline version ## 4. Change the display language (Optional) > Language should be automatically set to your browser's default language. If not, you can follow this step to change the display language. -Visit bilibili, there should be 2 icons (Add-ons and settings) on the left side of page. Open settings by clicking the icon. +Visit bilibili, there should be 2 icons (Add-ons and settings) on the left side of the page. Open settings by clicking the icon. Assuming the current language is Simplified Chinese (default fallback language), unfold `工具` (tools) category and find `界面翻译` (UI translation). Enable it and select a target language you want to see, then refresh the page. -e.g. Select English as target language +e.g. Select English as the target language ![Open settings](images/original/settings-icon.en-US.png) ![Change settings](images/original/settings.en-US.png) ## 5. Enjoy -You are all set! Explore settings and add-ons to discover interesting features, and feel free to suggest a new feature or report a bug on my GitHub repo. \ No newline at end of file +You are all set! Explore settings and add-ons to discover interesting features, and feel free to suggest a new feature or report a bug on my GitHub repo.