I have almost finalised a portfolio website and everything looked good on preview, responsiveness included, however once I tried publishing I encountered a few issues on the mobile browser version as per below:
Issues on mobile I’ve found so far:
Contact form borders don’t show correctly on iPhone (although the boxes show fine on android) - see screenshots attached of how it looks on the preview and of the incorrect one as it appears on iPhone
Text colour highlight (added through HTML) does not work on mobile (the default colour is shown instead), this was also showing correctly in the preview also for mobile;
I have a scroll animation from section to section, this doesn’t work on mobile (neither android nor iPhone);
I have an animation where the Nav bar Logo comes in when scrolling down the page, but this does not work on the mobile browser - the logo never comes in.
All these are good on desktop, and also work perfectly on the mobile version in the preview (animations included)
Is this a bug, and do you have any ideas on how to make these work correctly?
How is it possible they seem to be ok on the preview but not on browser? Except for the contact form issue, it seems that the main issues are the animations on mobile, and custom code.
Thank you in advance!