Technical Document Safari issues

Having trouble with my icon and checkbox position not being fixed on safari so my navbar pushes them out the way and resizes the page. Seems to work fine on firefox and chrome. Technical Document Project. Much appreciated.

Can’t really test on Safari, I did check in a VM and I’m not sure I see the issue. What platform and Safari version are you seeing it on? Can you post a screenshot showing the problem?

I would avoid using zoom.

Try using a label for the menu toggle and connect the checkbox to that label by using the for attribute. Make the span icon a label and give it a for attribute, then give the checkbox that as an id. Remove the pointer-event: none on the label and hide the checkbox. Not sure if this will fix anything with the problem you are seeing, but I personally think it is a better way of doing the checkbox-hack.

BTW, your first media query is unclosed and the second is missing the colon : on the max-width.

Quick example pen, just let be know when you are done with it and I will delete it. Also, maybe try testing in debug view on Codepen just to make sure (Change view > Debug mode)
Edit delete:

Hey, the lable was much easier than using zoom, thanks! Also viewing it in debug mode fixed the problem, I honestly didn’t know what that was for I always just used full view mode so thanks for that.

Good to hear it fixed it.

Yes using a label is much better in my opinion.

Codepen can get a little funky sometimes when checking responsiveness and media queries, the debug view is a good way to test it a little more reliably.

I will delete my copy of your Codepen. You are done with it, right?

Yeah I’m done with it, thanks

1 Like