css_tips.css

/* 1. Display Flex not working on Safari */
.row {
    display: -ms-flexbox;
    display: flex;
    display: -webkit-box;
}

/* 2. Height Issue for Flex Items */
Don't use percentage heights for flex items or child. Use height auto.
https://stackoverflow.com/questions/33636796/chrome-safari-not-filling-100-height-of-flex-parent

/* 3. background-attachment: fixed iOS Safari issue */
.banner {
    background-attachment: fixed
}
will cause the image to scale huge on iOS device. To fix this overwrite CSS using:
.banner {
    background-attachment: initial;
}

css_tips.html

<!-- Full Width td when multiple th or tds are presetn -->
<td className="text-center" colspan="7">This is full width td</td>