Hi all,
I have been notified by some people that certain text elements on my portfolio are displaying very oddly on Safari/MacOS/iOS devices. Specifically, it seems that on the Home section, the link blocks seem to cut off the top 40-50% of the text, and in the About section, the text is both cut off, and when highlighted seems to go entirely transparent.
Here is the read-only link to my portfolio: Kage.Quest
Due to the unique way I have created my site, to view the About section in the designer you will need to do the following:
- Add the ‘invis’ class to the first section (ID: Home)
- Remove the ‘invis’ class from the second section (ID: About)
- (Optional) Change the ‘LogoContainer’ div to have Width and Height set to 150px, and a top-margin of 15% (This is done on the live-site via custom code during section transitions, but has to be done manually in the designer to see the intended design and/or move the logo out of the way while making changes)
Lastly, as an example of the issue live, here is a video that one person has sent me which highlights the above-mentioned issues perfectly: Google Drive Link
I am unsure what is causing this; On Windows and Android devices I have absolutely no issues, and I have tested it on at least 3-4 different devices that I own. Is this an Apple-only display issue? I do not have any Apple devices I can personally test on.
Thank you for any advice!