I'm currently working on a project using Angular2 to develop a website. In the styling of my components, I am utilizing the :host selector. The CSS used for each component is very similar across the board:
:host
{
position: relative;
top: 60px;
background-color: black;
width: 100%;
}
Since most components are populated dynamically with data from a database, the host element should grow accordingly as content is added. This functionality works fine in Chrome and Firefox, but Safari presents a problem. In Safari, although the data loads correctly, the :host element does not expand, causing the black background color to abruptly cut off when scrolling down the page. It's worth noting that the version of Safari being used is 9, an older version which might explain the issue. However, since backward compatibility is important, I still need it to work despite the browser version. Additionally, I have yet to test this behavior in IE or Edge, so I'm unsure if it's also a problem there.
I am curious about why the :host element isn't expanding along with its content in Safari (at least in the older version) and whether there's a solution to address this. I understand that simply creating a wrapper class for each component and applying the background color there instead of using :host would solve the problem (I've tested it), and I'm willing to go that route if necessary. However, before resorting to adding wrapper divs or classes, I wanted to seek advice here to see if anyone has encountered this issue and successfully resolved it without additional HTML elements.