Semantic-Org / Semantic-UI-React

The official Semantic-UI-React integration
https://react.semantic-ui.com
MIT License
13.21k stars 4.05k forks source link

Started receiving Unsupported style errors on semantic-UI components #4348

Closed alexistbell closed 2 years ago

alexistbell commented 2 years ago

Just in the last day I've started to get errors like this:

Warning: Unsupported style property -webkit-line-clamp. Did you mean WebkitLineClamp?
    at div
    at CardHeader

and

Warning: Unsupported style property -webkit-box-orient. Did you mean WebkitBoxOrient?
    at div
    at CardHeader

on many of my semantic UI components. I'm not adding those styles in my code, it all appears to be happening in the semantic-ui-react components themselves. I'm seeing these errors in both Chrome and Firefox.

Here's the example code from that specific warning:

 const programCardStyle = {
    backgroundColor: '#ffffff',
    borderRadius: '10px',
    border: 'solid 1px #d9d9d9',
    boxShadow: '0 2px 4px 0 rgba(0,0,0,0.2)',
    width: '15rem',
    height: '19.375rem',
    margin: '5px 10px',
    padding: '8px'
  }

  const cardImageStyle = {
    height: '13.688rem',
    width: '13.688rem'
  }

  return (
    <div key={program?.slug} style={programCardStyle}>
      {program
        ? program.images && program.images[0] !== undefined &&
          <>
            <Details
              program={program}
              trigger={<img src={program.images[0].url} alt={program.name} style={cardImageStyle} onError={defaultImage} />}
            />
            <Card.Content>
              <Card.Header style={styles.cardNameStyle}>{program.title}</Card.Header>
              <Card.Meta style={{ textAlign: 'center' }}>{formatDate(program.createdAt)}</Card.Meta>
            </Card.Content>
          </>
        : <>
          <Placeholder><PlaceholderImage style={cardImageStyle} /></Placeholder>
          <Card.Content />
        </>}
    </div>
  )

I tried to update to version 2.1.2 to see if that would make the issue go away but it hasn't. I haven't added or updated any other packages in my project recently. I'm not sure what else I could have done that could have caused these issues to show up, and possible it's related to a browser update of some sort?

It would be great if these errors could go away. They don't seem to be causing any actual issues, but they are making it hard for me to track down my own errors.

welcome[bot] commented 2 years ago

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

layershifter commented 2 years ago

Please provide a repro case at CodeSandbox as it does not seem related to Semantic UI React itself.