Q: Safari 7.1 span display bug
Safari 7.1 has a bug regarding the display CSS property of span elements.
The following page is a minimized version of the problem.
The line "This line should be visible", starts with style display none due to Stylesheet, but is then shown via jQuery with class selection when document ready.
Safari 7.1 fails to show the line.
There are a number of modifications that work around the bug:
- Remove the first <br />
- Remove the last <br />
- Change the span elements to div
This is wreaking havoc with my Mac users! The workarounds are not a reasonable option since our business has an extensive site that expects browsers to behave properly.
Live example at: http://jsfiddle.net/61hrkge7/
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
$('.startsHidden').show();
$('.startsVisible').hide();
});
</script>
<style type="text/css">
.startsHidden { display:none; }
</style>
</head>
<body>
<div>
<br />
<span class="startsVisible">
This line should be hidden<br />
</span>
<span class="startsHidden">
This line should be visible<br />
</span>
<br />
</div>
</body>
</html>
iMac (21.5-inch Mid 2011), OS X Mavericks (10.9.5), Safari 7.1
Posted on Oct 12, 2014 8:33 PM