Currently, I have implemented a transition on the elements of a table to create a stylish border effect, and everything is functioning as expected.
However, a sporadic issue arises upon page refresh where each individual box will transition in as if all variables are empty, resizing from an assumed height and width of 0 to 250. This disrupts the overall aesthetic of the site significantly.
My assumption is that the transition properties may be misinterpreting some values as null or zero, leading to this unexpected behavior. Unfortunately, there doesn't seem to be a way to make exceptions for specific dimensions like width and height.
I attempted setting manual transitions for key parameters like outline, color, and background-image, but this resulted in the background image snapping without any smooth transitions, suggesting a deeper issue.
Below is the code snippet in question:
#portfolio-table td{
width: 250px;
height: 250px;
min-width: 250px;
min-height: 250px;
// Other CSS properties
transition: all 1.5s ease-in-out;
}
#portfolio-table td:hover{
// CSS properties for hover state
transition: all 0.5s ease-in-out;
}
In addition, the background-image is set individually for each cell in the table using custom CSS rules.
Despite efforts to minimize repetition and define minimum sizes for width and height, the transition still occurs as if starting from zero.
For a live demonstration, you can visit this link and observe the effect by refreshing the page multiple times.