title: Invalid CSS Styles in Safari on Mac
body: <p>I developing on Next.js.</p>
  <p>The problem is happening on the GridInput component that included two components.
  At first, it styled correctly while I'm developing on Chrome until I open my website on Safari that notice me the problem.</p>
  <p>I tried to check <code>&lt;!doctype HTML&gt;</code> and restart server already.</p>
  <p>GridInput:</p>
  <pre><code>let error = '';
  let data = '';
  
  if (this.state.error.length) {
     error = (
        &lt;div className={style.error_container}&gt;
           &lt;button className={style.error_btn} onClick={this.handleErrorClick}&gt;X&lt;/button&gt;
           &lt;ul className={style.error_ul}&gt;
              {this.state.error.map((err, i) =&gt; &lt;li key={i} className={style.error_li}&gt;{err}&lt;/li&gt;)}
           &lt;/ul&gt;
        &lt;/div&gt;
     )
  } else {
     error = ''
  }
  
  if (this.state.data?.length) {
     data = this.state.data.map(data =&gt; (
        &lt;GridBody
           key={data}
           data={data}
           editable={this.props.isContentEditable}
           info={this.state.info.hasOwnProperty(data) ? this.state.info[data] : '-'}
           onClick={this.handleDelete.bind(undefined, data)}
           onEditClick={this.handleEditClick.bind(undefined, data)}
        /&gt;
     ))
  } else {
     data = ''
  }
  
  &lt;div className={style.settings + ' container'}&gt;
     &lt;button title=&quot;Clear data&quot; className={style.reset_btn} onClick={this.handleResetClick}&gt;X&lt;/button&gt;
        &lt;GridHeader
           title={this.props.title}
           subTitle={this.props.subTitle}
        /&gt;
     &lt;form className={style.form} onSubmit={this.handleSubmit} autoComplete=&quot;off&quot;&gt;
        &lt;input
           type=&quot;text&quot;
           name=&quot;name&quot;
           className={style.input}
           onKeyDown={this.handleInputKeyDown}
           onChange={this.onChange}
           value={this.state.name}
           disabled={this.state.type === 'edit' ? true : false}
           ref={this.inputRef}
        /&gt;
       &lt;div className={style.input}&gt;
           {
              this.props.isInfoRequired &amp;&amp; &lt;span className={style.optional} onClick={this.handleOptionalClick} ref={this.optionalRef}&gt;(optional)&lt;/span&gt;
           }
           &lt;div contentEditable className={style.input_info} type=&quot;text&quot; ref={this.infoRef} onFocus={this.handleInfoFocus} onBlur={this.handleInfoLostFocus} onKeyDown={this.handleInfoKeyDown} /&gt;
       &lt;/div&gt;
       &lt;input type=&quot;submit&quot; className={style.input} /&gt;
     &lt;/form&gt;
     {error}
     {data}
  &lt;/div&gt;
  </code></pre>
  <p>GridInput.module.css:</p>
  <pre><code>.settings {
      display: flex;
      flex-direction: column;
      position: relative;
  
      margin-bottom: 2rem;
  }
  
  .form {
      display: grid;
      grid-template-columns: 70% 20% 10%;
      align-items: stretch;
      justify-items: center;
      width: 100%;
      min-height: 3rem;
      background: #1f1f23;
  }
  
  .input {
      width: 100%;
      height: 100%;
      background: #1f1f23;
      border-top: 3px solid #2b2c31fb;
      border-right: 3px solid #2b2c31fb;
      text-align: center;
      position: relative;
      font-size: 1rem;
  }
  .optional {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: rgb(177, 177, 177);
  }
  .input_info {
      width: 100%;
      padding: 1rem;
      background: #1f1f23;
      overflow: visible;
  }
  .input_info:focus {
      outline: none;
  }
  input.input:last-of-type {
      border-right: none;
  }
  .error_container {
      background: #1f1f23;
      padding: 1rem 0;
      /* margin-top: 10px; */
      border-top: 3px solid #2b2c31fb;
      position: relative;
  }
  .error_btn {
      background: transparent;
  
      position: absolute;
      top: 0.25rem;
      right: 0.25rem;
  
      width: 2rem;
      height: 2rem;
  }
  .error_ul {
      margin: 0;
  }
  .error_li {
      margin: 0.25rem 0;
  }
  .reset_btn {
      color: #000;
      height: 2rem;
      width: 2rem;
      border: none;
      cursor: pointer;
      border-radius: 50%;
      position: absolute;
      top: 1.5rem;
      right: 2.5rem;
      transform: translate(50%, -50%);
  }
  </code></pre>
  <p>GridHeader:</p>
  <pre><code>&lt;header className={style.header}&gt;
     &lt;span className={style.head}&gt;{props.title}&lt;/span&gt;
     &lt;span className={style.head}&gt;{props.subTitle}&lt;/span&gt;
     &lt;span className={style.head}&gt;-&lt;/span&gt;
  &lt;/header&gt;
  </code></pre>
  <p>GridHeader.module.css:</p>
  <pre><code>.header {
      display: grid;
      grid-template-columns: 70% 20% 10%;
      align-items: stretch;
      justify-items: center;
      width: 100%;
      min-height: 3rem;
      background: #1f1f23;
  }
  .head {
      width: 100%;
      line-height: 3rem;
      text-align: center;
      border-right: 3px solid #2b2c31fb;
  }
  .head:last-of-type {
      border: none;
  }
  </code></pre>
  <p>GridBody:</p>
  <pre><code>&lt;div className={style.container} &gt;
     &lt;span className={style.body}&gt;{props.data}&lt;/span&gt;
     &lt;span className={style.body}&gt;{props.info}&lt;/span&gt;
     &lt;button className={style.body} onClick={props.onClick}&gt;Delete&lt;/button&gt;
     {props.editable ? &lt;button className={style.edit} onClick={props.onEditClick}&gt;Edit&lt;/button&gt; : ''}
   &lt;/div&gt;
  </code></pre>
  <p>GridBody.module.css:</p>
  <pre><code>.container {
      display: grid;
      grid-template-columns: 70% 20% 10%;
      align-items: stretch;
      justify-items: center;
      width: 100%;
      min-height: 3rem;
      background: #1f1f23;
      position: relative;
  }
  .body {
      border-top: 3px solid #2b2c31fb;
      width: 100%;
      line-height: 3rem;
      text-align: center;
      border-right: 3px solid #2b2c31fb;
  
      font-size: 1rem;
      position: relative;
  }
  button.body {
      background: #1f1f23;
  }
  button.body:last-of-type {
      border-right: none;
  }
  .edit {
      width: 3rem;
      background: transparent;
      position: absolute;
      top: 50%;
      right: -4rem;
      transform: translateY(-50%);
  
      border: 1px solid #fff;
      border-radius: 10px;
  }
  </code></pre>
  <p>FireFox:
  <a href="https://i.stack.imgur.com/yLmO4.png" rel="nofollow noreferrer">Correct style</a></p>
  <p>Chrome:
  <a href="https://i.stack.imgur.com/t00bF.png" rel="nofollow noreferrer">Correct style</a></p>
  <p>Safari:
  <a href="https://i.stack.imgur.com/tdtNm.png" rel="nofollow noreferrer">incorrect style</a></p>
  <p><a href="https://codesandbox.io/s/2zmwe?file=/pages/settings.js" rel="nofollow noreferrer">My sandbox</a></p>