Mysterious <style> Tag Being Created in Chrome

1

Hi Everyone!

I have a very weird UI thing happening with my Wikipedia Viewer project. I’m using ReactJs, and for the purposes of prototyping am also running a Node/ExpressJs backend. The issue is this: On Mac OSX in Firefox and Safari, the head of my rendered html looks like this:

<head>
  <title>Wikipedia Dark Reader</title>
  <link rel="stylesheet".../>
  <link rel="stylesheet".../>
  <link rel="stylesheet".../>
<head>

This displays everything as expected. However, on Chrome, the head of my rendered html looks like:

<head>
  <title>Wikipedia Dark Reader</title>
  <link rel="stylesheet".../>
  <link rel="stylesheet".../>
  <link rel="stylesheet".../>
  <style>
    @media screen {

    /* Leading rule */
    html {
      -webkit-filter: brightness(110%) contrast(90%) grayscale(20%) sepia(10%) !important;
    }

    /* Text contrast */
    html {
      text-shadow: 0 0 0 !important;
    }

    /* Full screen */
    *:-webkit-full-screen, *:-webkit-full-screen * {
      -webkit-filter: none !important;
    }

    /* Page background */
    html {
      background: rgb(255,255,255) !important;
    }

    }
<head>

Does anyone know why Chrome would be creating this additional <style> tag? If so, do you also know how to control its content?

Thank you!

Kyle

3

You need to use triple backticks to post code to the forum.
I went ahead and did it for you :slight_smile:
See this post for details.

4

it may be injecting this code automatically from the stylesheet css you’re using …

also add this to the very top of your html

<!DOCTYPE html>

http://www.htmlgoodies.com/html5/markup/the-doctype-tag-and-its-effect-on-page-rendering.html#fbid=2el_JGOPZbO

chromium os, chrome is a google product and my favorite quote:

“Don’t be evil, unless it’s profitable!” :smiling_imp: