Strange Bug: Safari Parsing
So I spent half a day fixing the following errors. The layout on Rental Cars Search results have been broken on Safari. We suspected that this had to do with Safari’s sppecific handling of divs and invalid HTML.
The General Setup
So the affected code in question looks like this. We have a homebrew JS template that looks and acts roughly like this.
<script type="text/template" id="rental-car-details"> <div> ... </div> </script> ... Somewhere in a JS file... var details = $('#rental-car-details').clone(); ... details.replace("", priceDetails); ... resultsBody.append(details);
We have a template, and we build a DOM element, that gets injected after results come back from an AJAX request.
Check the Commit Logs
We confirmed with QA that this was a new bug. Checking the logs, we see only one major commit from the last valid section.
Test By Bisection
I reduced a lot of the code down to make sure that no other divs were affecting it. To make sure that the layout was stable even before this chunk of template exists.
I started commenting out different parts of the template, and was able to identify the exact line of HTML that causes the problem.
This was that line
<span class="actual-price"> <span class="dollar">$</span> </span> <span class="perday">/</span>
So we kept pairing it down. to eventually get to:
Yes, so while this is okay in most of the browsers, for some reason, in Safari. When this is injected, this breaks the layout.
Test cases for solutions.
So we did some small tests, seeing if it had something to do with the characters, or the signs. And what we came up was this:
<!-- This *somehow* fixes it --> <span class="dollar"> $ </span> <!-- This is still broken --> <span class="dollar"> $</span> <!-- This is still broken --> <span class="dollar">$ </span>
>$< character incorrectly. It required atleast 3 characters within between the span.
So to make the least breaking changes possible, I eneded up with the following.
<!-- Safari fix: single dollar sign ($) breaks layout. --> <span class="dollar">$</span>
I would love to know why this breaks in Safari. But we’ll have to investigate the root cause another day.