I've encountered an issue with a hidden div that is supposed to show on page load with a transition. While it works fine in Firefox, Chrome seems to be struggling to display the div.
If you'd like to try it out yourself, here's the link for comparison in both Firefox and Chrome:
The root of the problem likely lies within the CSS code, presenting a bit of a challenge to diagnose and resolve.
Interestingly enough, the issue doesn't occur when testing locally in Chrome, which adds to the confusion.
UPDATE: Solution Found
After some troubleshooting, I discovered that updating the script in the following manner resolved the discrepancy:
Initially:
<script>
$(document).ready(function() {
setTimeout(function() {
$('.slider').css('visibility', 'visible');
$('.slider').css('opacity', '1');
$('.slider').css('max-height', '4000px');
$('.slider').css('-webkit-transition', 'all 2s linear');
$('.slider').css('transition', 'all 2s linear');//notice this line
},3000);
});
</script>
Updated Version:
<script>
$(document).ready(function() {
setTimeout(function() {
$('.slider').css('visibility', 'visible');
$('.slider').css('opacity', '1');
$('.slider').css('max-height', '4000px');
$('.slider').css('-webkit-transition', 'all 2s ease-in-out');
$('.slider').css('transition', 'opacity 2s ease-in-out, max-height 2s ease-in-out');//This is the line I changed
},3000);
});
</script>
Although the reason behind the change is unclear, this adjustment successfully resolves the compatibility issues across all browsers.