I'm finishing my react application of an todo list which is almost ready, just need to fix bugs in safari, of course.
As you can see in the gif, when you hover the cursor over the browser (it has no hover effects of any kind), the png image has that behaviour that produces that annoying marking.
This does not happen in other browsers, only in safari, my suspicion is that filter: drop-shadow() is not supported in safari, even though can i use says it is. https://caniuse.com/?search=filter%3A%20drop-shadow
On the other hand, the browser is a completely unrelated component to the png image being displayed, so I don't know why the image is displayed like that when hovering.
My image and browser css code is as follows:
image:
.notes-empty-img{
width: 300px;
display: flex;
justify-content: center;
align-items: center;
margin: 0 auto;
position: relative;
top: 100px;
}
.notes-empty-img img{
filter: drop-shadow(0 0 40px #00c9a7);
max-width: 100%;
object-fit: cover;
}
@media (min-width: 768px) {
.notes-empty-img{
width: 600px;
}
}
search engine
@import url('https://fonts.googleapis.com/css2?family=Blaka&family=Comic+Neue:wght@300;400;700&family=Montserrat:wght@100;300;400;500;600;700;900&family=Permanent+Marker&display=swap');
.search{
width: 100%;
margin: 2rem auto;
display: flex;
align-items: center;
justify-content: center;
gap: 2rem;
flex-direction: column;
}
.input-wrapper{
position: relative;
width: 80%;
display: flex;
align-items: center;
}
.search input{
width: 100%;
padding: 1rem;
border-radius: 10px;
outline: none;
border: none;
box-shadow: 0 0 2px black;
background-color: rgb(1, 1, 1, .8);
color: white;
}
.search input::placeholder{
color: rgb(188, 188, 188);
font-family: 'Montserrat', sans-serif;
}
.icon{
font-size: 1.8rem;
cursor: pointer;
}
.search-icon{
color: #585858;
position: absolute;
right: 10px;
}
@media (min-width: 668px) {
.search{
flex-direction: row;
gap: 2.5rem;
width: 90%;
}
.input-wrapper{
width: 40%;
}
}
.boxInput:before {
content: "";
z-index: -1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: linear-gradient(129deg, #845ec2 0%, #00c9a7 100% );
transform: translate3d(0px, 0px, 0) scale(1.05);
filter: blur(8px);
opacity: var(0.7);
transition: opacity 0.3s;
border-radius: inherit;
}
/*
* Prevents issues when the parent creates a
* stacking context. (For example, using the transform
* property )
*/
.boxInput::after {
content: "";
z-index: -1;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: inherit;
border-radius: inherit;
}
I also share with you the jsx structure of the components
Component Search.js
//import React, { useState } from 'react'
import {MdSearch, MdAdd} from 'react-icons/md'
import '../styles/Search.css'
const Search = ({ handleSearchNote, setShowNote }) => {
// const [showNote, setShowNote] = useState(true)
const handleShowAddNote = () => {
/* By default in css, addnotes has a display none */
if (setShowNote){
let addNote = document.querySelector('.new');
let img_initial = document.querySelector('.notes-empty-img');
if (img_initial != null){
img_initial.style.display='none'
}
addNote.classList.add('wobble-horizontal-top')
addNote.style.display='flex';
document.querySelector('.notes-list').style.display='none';
if (document.querySelector('.pagination') != null){
document.querySelector('.pagination').style.display='none';
}
}
}
return (
<div className='search'>
<div className="input-wrapper boxInput">
<MdSearch
className='icon search-icon'
/>
<input
type="text"
placeholder='What note are you looking for?'
onChange={(event) => handleSearchNote(event.target.value) }
/>
</div>
<div className="btn-wrapper-search boxBTN">
<button
className='btn-addNote'
onClick={handleShowAddNote}>
New Note
</button>
<MdAdd
className='icon add-icon'
/>
</div>
</div>
)
}
export default Search
Component App.js, where the image is rendered
return (
<>
<div className="container">
<Header />
<Search
handleSearchNote={setSearchText}
setShowNote={setShowNote}
/>
{notes.length===0 &&
<div className="notes-empty-img">
<img src={srcImage} alt="paperImg" />
</div>
}
<Pagination
data={filterNotes}
handleAddNote={addNote}
handleDeleteNote={deleteNote}
searchText={searchText}
/>
<Footer />
</div>
</>
)
A small note, the effect of the gradient shadows in the search engine and in the add notes button, is not a box-shadow, it is made with this tool by Álvaro Trigo https://alvarotrigo.com/shadow-gradients/. I don't know if it can generate conflicts in any way.
A greetings and thanks in advance!