Currently, I am in the process of creating a website on my Mac and have conducted testing on Chrome, Safari, and Firefox thus far.
This particular webpage utilizes the JQuery Flip plugin for a card that has different content on each side. Due to the variable length of the content on the back side, I am considering enclosing it within a <div> tag with either style="overflow: scroll;" or style="overflow: auto;".
An issue arises when viewing the page in the Chrome browser where the back side content appears in reverse on the front side, which is not the desired behavior. Surprisingly, this problem does not occur when using Safari or Firefox browsers.
To exemplify this issue, you can access a fiddle showcasing the problem here. Clicking on the card will trigger the flip effect. When viewed in Chrome, you will notice the reversed back content on the front side. In contrast, when checked in Safari and Firefox, everything functions as intended.
I have reached out to the author of the plugin for a potential solution but have yet to receive a response. Although I initially suspected it could be a plugin-related complication, I now believe it may be more related to how Chrome interprets the "overflow" style. My assumption is that there might be a CSS workaround, particularly connected to 3D effects, that could resolve the display issue on Chrome.
Your assistance in resolving this matter would be greatly appreciated.
PS
In a post on David Walsh Blog, Ana Tudor mentions, "Applying certain properties with specific values (like overflow: hidden) on the card element would prevent it from having 3D transformed children." This statement potentially sheds light on why the effect fails on Chrome, though it remains unclear why it operates smoothly on Safari and Firefox. Unfortunately, no definitive solution has been provided, and reaching out to either Walsh or Tudor seems challenging.