Bugs Solved
Successfully

<< Back

Safari Background Image and Bottom Menu

A client pointed out that his hero section wasn't working correctly in safari on his apple phone. Basically the issue was that 1. safari doesn't support the background-attachment property that was set. 2. The height was set to 100% so it only filled up the view window which causes issues when scrolling. This is due to the bottom menu that safari adds. The image would shift due to suddenly having more area to fill.

These two issues were not initially obvious, so after debugging the issue I eventually discovered these issues. I was able to fix by creating code that only runs on safari browsers. The code sets the background-attachment to a property that is supported and also sets the height to -webkit-fill-available which ensures the height is based on the container rather than the viewport.

Video Responsiveness Bug

I discovered that our video inserter wasn't very mobile friendly when it came to uploaded videos. Basically the code was set to make iframes responsive, but had a opposite effect on html5 video elements. What it would do is it would create a bunch of whitespace on desktop view that would cause spacing issues. On mobile the video would start to go over top of elements underneath it and would overflow beyond the page and not resize down.

To fix I found that if you set the container height to 100% and got rid of the padding-bottom it would fix the container. At the point the last step was just making sure the video would only fill the available space and the height would auto change based on the width. This fixed the video issues but broke iframe videos so I also had to add javascript to add a special class to html videos so that it would only affect them.

So far, Brandon has been happy with my work and is excited about the full site once it is completed. In addition to setting this up, I will also be adding some analytic and marketing tools to the site. Lastly, I added a custom contact form from a third party called Jot Form.

Calendly Popup Widget Bug

One day a bunch of clients noticed that their calendly links (which we integrate with) weren't working correctly. The issue was that Calendly had updated their library to require a different function call to open the widget. When I noticed there was a problem, I was able to troubleshoot the issue by finding the source code in our global script and found a temporary workaround while reaching out to our development team.

I was able to jump on a call with our lead developer and pointed out where the old code was and what needed to be upated. He was able to quickly fix the issue and the bug was solved.