Webkit inline styles dissapears in Firefox

Saibamen
创建于
2019-09-30 13:39:44

Do you want to request a feature or report a bug?: bug

What is the current behavior?
Missing -webkit-print-color-adjust: exact; in Firefox

Demo:

  1. Run https://stackblitz.com/edit/react-skxixb in Firefox and Chrome
  2. Check CSS for .header

What is the expected behavior?
-webkit-print-color-adjust: exact; should be placed in all browsers

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 16.9.0 and 16.10.1
Windows 10
Firefox 69.0.1

6条回答
Saibamen
回复于
2019-09-30 14:01:52
#1

Workaround:

<style dangerouslySetInnerHTML={{__html: `
    .header { -webkit-print-color-adjust: exact; }
`}} />
kevinsunny1996
回复于
2019-10-02 15:30:35
#2

@Saibamen did this workaround solve the issue that you were facing?

kevinsunny1996
回复于
2019-10-02 15:31:04
#3

And is this a permanent workaround?...Any PR for this?

Saibamen
回复于
2019-10-02 18:38:59
#4

@kevinsunny1996 Workaround is workaround, not issue solver.

<style> tag always working. The bug is that `WebkitPrintColorAdjust: 'exact',` should be always rendered as CSS style in any browser
回复于
2020-01-09 20:48:16
#5

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

necolas
回复于
2020-01-09 22:24:02
#6

Browsers will not set any inline styles with vendor prefixes for different browsers.

当前位于第1页,总计6 条回复

推荐相似问题

Design decision: why do we need the stale closure problem in the first place?

Hi, I initially asked this on Twitter and @gaearon suggested me to open an issue instead. The original thread is here: h
讨论数 23
react
创建时间:2019-09-30 11:07:44

When SSR returns a field that is inconsistent with the client side, the client side should prevail

There is the demo: return page(HTML) is: <html> <head> ... </head> <body> <div id='react'> <div id="le
讨论数 5
react
创建时间:2019-09-30 08:02:34

Why will Suspense for data fetching require a cache?

I'm integrating Suspense with React Async, and I've been reading up on how it's supposed to work. All the resources I fo
讨论数 13
react
创建时间:2019-09-29 21:56:33

Devtools extension does not show elements from local files

Do you want to request a feature or report a bug? Bug What is the current behavior? When a local file is loaded, the dev
讨论数 4
react
创建时间:2019-09-29 10:28:49

react-scripts build will incorrectly redirect page if URL contains '.html?'

Do you want to request a feature or report a bug? Report a bug What is the current behavior? When running react-scripts
讨论数 2
react
创建时间:2019-09-29 09:35:30

Error: "Maximum call stack size exceeded"

Describe what you were doing when the bug occurred: Profiling my react web page Please do not remove the text below this
讨论数 2
react
创建时间:2019-09-29 08:46:37

Request: Create an ESLint Plugin for warnings and depreciations that will impact major upgrades

Do you want to request a feature or report a bug? Feature What is the current behavior? React currently does console out
讨论数 8
react
创建时间:2019-09-28 19:44:12

onclick event is not attached to a div under ternary operators when doing a map function

Do you want to request a feature or report a bug? maybe a bug or design in purpose? What is the current behavior? onclic
讨论数 2
react
创建时间:2019-09-28 19:35:00

Context api higger than 16.3 available in props (functional component) with react-router-v5

My code where I configur my context Provider is like belowe: import React, {createContext} from 'react'; const InitialC
讨论数 4
react
创建时间:2019-09-28 19:13:14

native img attribute loading="lazy" (chrome new feature).

attribute loading="lazy" works on image tag as it should; but in react I should use 'data-loading' or 'custom-loading' o
讨论数 8
react
创建时间:2019-09-28 16:20:05