I have been working on a plugin to create animated modal boxes by utilizing the clip-path property. However, I have encountered an issue where this code only seems to work in Chrome. You can view the codepen demo here.
Unfortunately, it appears that Firefox does not support the use of polygon() in the clip-path property, and Safari & Mobile Safari also struggle with it.
Does anyone have any suggestions on how to make this plugin compatible with Firefox, Safari, and Mobile Safari as well? Any ideas on how to approach this problem would be greatly appreciated.
Here is the JavaScript code snippet for reference:
var $ov = $('.overlay');
$(document).on('click touchstart', '.inner', function(){
// Code here
});
And here is the CSS code snippet:
body, html {
background: silver;
}
.grid {
// Grid styling
}
.inner {
// Inner box styling
}
.overlay {
// Overlay styling
}
You can include the jQuery library from this CDN link:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>To implement the grid structure and inner elements, you can use the following HTML template:
<div class="grid">
<div class="inner"></div>
</div>
// Repeat the above structure for multiple grids and inner elements
<div class="overlay"></div>