fix: fix grayscale in firefox (#1261)

This commit is contained in:
Nolan Lawson 2019-06-01 15:51:46 -07:00 committed by GitHub
parent f5c7bc790f
commit 604471a158
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 16 additions and 7 deletions

View file

@ -17,6 +17,17 @@
<!-- inline CSS --> <!-- inline CSS -->
<style id="theGrayscaleStyle" media="only x">
/* Firefox doesn't seem to like applying filter: grayscale() to
* the entire body, so we apply individually.
*/
img, svg, video,
input[type="checkbox"], input[type="radio"],
.inline-emoji, .theme-preview, .emoji-mart-emoji, .emoji-mart-skin {
filter: grayscale(100%);
}
</style>
<noscript> <noscript>
<style> <style>
.hidden-from-ssr { .hidden-from-ssr {

View file

@ -37,7 +37,8 @@ if (theme !== INLINE_THEME) {
} }
if (enableGrayscale) { if (enableGrayscale) {
document.body.classList.add('grayscale') document.getElementById('theGrayscaleStyle')
.setAttribute('media', 'all') // enables the style
} }
if (!currentInstance) { if (!currentInstance) {

View file

@ -1,5 +1,7 @@
import { switchToTheme } from '../../_utils/themeEngine' import { switchToTheme } from '../../_utils/themeEngine'
const style = process.browser && document.getElementById('theGrayscaleStyle')
export function grayscaleObservers (store) { export function grayscaleObservers (store) {
if (!process.browser) { if (!process.browser) {
return return
@ -8,7 +10,7 @@ export function grayscaleObservers (store) {
store.observe('enableGrayscale', enableGrayscale => { store.observe('enableGrayscale', enableGrayscale => {
const { instanceThemes, currentInstance } = store.get() const { instanceThemes, currentInstance } = store.get()
const theme = instanceThemes && instanceThemes[currentInstance] const theme = instanceThemes && instanceThemes[currentInstance]
document.body.classList.toggle('grayscale', enableGrayscale) style.setAttribute('media', enableGrayscale ? 'all' : 'only x') // disable or enable the style
switchToTheme(theme, enableGrayscale) switchToTheme(theme, enableGrayscale)
}) })
} }

View file

@ -31,11 +31,6 @@ body {
background: var(--body-bg); background: var(--body-bg);
-webkit-tap-highlight-color: transparent; // fix for blue background on spoiler tap on Chrome for Android -webkit-tap-highlight-color: transparent; // fix for blue background on spoiler tap on Chrome for Android
overflow-x: hidden; // Prevent horizontal scrolling on mobile Firefox on small screens overflow-x: hidden; // Prevent horizontal scrolling on mobile Firefox on small screens
&.grayscale {
filter: grayscale(100%);
}
} }
.main-content { .main-content {