had an issue with Input type=”color” working in chrome but not in safari. According to https://caniuse.com/, that property should work in safari.

Through the following tests I figured out that the color picker is coming from the input criteria, and it doesn’t work when the width and height are 0.

  // working
    <div>
      <input type={"color"} id={"test"} style={{ display: "none" }} />
      <label htmlFor={"test"}>test</label>
    </div>
  );

  // not working
  <div style={{ position: "relative" }}>
    <input
      type={"color"}
      id={"test1"}
      style={{
        position: "absolute",
        top: 0,
        left: 0,
        width: "100%",
        height: "100%"
      }}
    />
    <label htmlFor={"test1"}>test</label>
  </div>;

  // not working
  <div>
    <input type={"color"} id={"test2"} style={{ opacity: 0 }} />
    <label htmlFor={"test2"}>test</label>
  </div>;

  // working
  <div>
    <input
      type={"color"}
      id={"test3"}
      style={{ width: "50px", height: "50px" }}
    />
    <label htmlFor={"test3"}>test</label>
  </div>;

But I don’t know why this behavior is happening, because in chrome it works fine when width and height are 0. What behavior is safari blocking?

The CSS for the existing input looks like this

    input{
    border: none;
    padding: 0;
    width: 0;
    height: 0;
    margin-top: 23px;
    opacity: 0;
}

I solved it by giving the input the following properties: position:absolute; width:100%; height:100%, visibillty:hidden to make the area full.
If the colorpicker is affected by the width of the input, why does it work on Chrome? I’m curious as to why it behaves this way.