'Stroke on an image with mask problem on specific element

https://oogvoordialoog.myio.nl/ do you see this link. I wrote some css to make a kind of stroke for an image with a css mask and with some elements on it (The eyes). The stroke doesn't work in Safari... It works in all the other browsers, but in Safari.

I use the same css on the team page, and it works there. The only difference is that it is only an image and not the eyes.

I use Wordpress and Elementor Pro. On the hotspot widget it doesn't work, but on an image widget it works. You can see al my code in the inspector.

What is the solution?

    
    filter: drop-shadow(1px 1px 0px var( --e-global-color-secondary ))
            drop-shadow(-1px -1px 0px var( --e-global-color-secondary ))
            drop-shadow(1px -1px 0px var( --e-global-color-secondary ))
            drop-shadow(-1px 1px 0px var( --e-global-color-secondary ))
            drop-shadow(1px 0px 0px var( --e-global-color-secondary )) 
            drop-shadow(-1px 0px 0px var( --e-global-color-secondary ))  
            drop-shadow(0px 1px 0px var( --e-global-color-secondary )) 
            drop-shadow(0px -1px 0px var( --e-global-color-secondary ))
            drop-shadow(1px 1px 0px var( --e-global-color-secondary ))
            drop-shadow(-1px -1px 0px var( --e-global-color-secondary ))
            drop-shadow(1px -1px 0px var( --e-global-color-secondary ))
            drop-shadow(-1px 1px 0px var( --e-global-color-secondary ))
            drop-shadow(1px 0px 0px var( --e-global-color-secondary )) 
            drop-shadow(-1px 0px 0px var( --e-global-color-secondary ))  
            drop-shadow(0px 1px 0px var( --e-global-color-secondary )) 
            drop-shadow(0px -1px 0px var( --e-global-color-secondary ));
    
    -webkit-filter: drop-shadow(1px 1px 0px var( --e-global-color-secondary ))
            drop-shadow(-1px -1px 0px var( --e-global-color-secondary ))
            drop-shadow(1px -1px 0px var( --e-global-color-secondary ))
            drop-shadow(-1px 1px 0px var( --e-global-color-secondary ))
            drop-shadow(1px 0px 0px var( --e-global-color-secondary )) 
            drop-shadow(-1px 0px 0px var( --e-global-color-secondary ))  
            drop-shadow(0px 1px 0px var( --e-global-color-secondary )) 
            drop-shadow(0px -1px 0px var( --e-global-color-secondary ))
            drop-shadow(1px 1px 0px var( --e-global-color-secondary ))
            drop-shadow(-1px -1px 0px var( --e-global-color-secondary ))
            drop-shadow(1px -1px 0px var( --e-global-color-secondary ))
            drop-shadow(-1px 1px 0px var( --e-global-color-secondary ))
            drop-shadow(1px 0px 0px var( --e-global-color-secondary )) 
            drop-shadow(-1px 0px 0px var( --e-global-color-secondary ))  
            drop-shadow(0px 1px 0px var( --e-global-color-secondary )) 
            drop-shadow(0px -1px 0px var( --e-global-color-secondary ));
}

This is my css code for the border. Maybe there is some other way to make an border on an object with a css mask?

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source

'Stroke on an image with mask problem on specific element

Sources

Related Questions