JSF ajax renders inputText but not panelGrid - ajax

Question

I found a strange behaviour regarding the ajax rendering of JSF and I am not shure what I am missing.
For simplicity I have a page with an h:inputText and and a h:panelGrid with a button inside. When someone clicks the button, the value of the h:inputText should be set with a standard value and the h:panelGrid should disappear. At first I will show the code then I explain it a bit more.
xhtml page:
<h:inputText id="trackingIdValue" value="#{bean.trackingId}" />
<h:panelGrid border="15" id="panel" rendered="#{not empty bean.list}">
<h:commandButton action="#{bean.render}" value="Clear Panel" >
<f:ajax execute="#this" render="panel trackingIdValue" />
</h:commandButton>
</h:panelGrid>
corresponding bean:
private Long trackingId;
private List<String> list;
public Long getTrackingId() {
return trackingId;
}
public List<String> getList() {
return list;
}
public void setList( List<String> list ) {
this.list = list;
}
#PostConstruct
public void init() {
// the list will be filled with some initial values
}
public void render() {
this.trackingId = 954643L;
list.clear();
}
When the page gets loaded the list will be filled with some values in the PostConstruct. This leads to the displaying of the panel because the list is not empty now. But when I click the button in the panel (where I change the trackingId and empty the list) the trackingId changed in the GUI but the panel is still visible. What did I do wrong?
UPDATE 1
As written in the comment I tried the code above in an empty project and there it works. I currently have a qiete huge application so shrinked down my pages and ended the following:
My project is consists of multiple page templates.In my master layout I have a h:head tag which loads many of my stylesheets I need for the application. When I completely remove the h:head tag then it works but then of course my styling is pretty bad. What does this has to do with my ajax loading and the panelgrid?
UPDATE 2
I have shorten my application to just one tiny page:
<h:head>
<h:outputStylesheet name="masterStyle.css" library="css" />
</h:head>
<h:body>
<h:form>
<h:inputText id="trackingIdValue" value="#{testBean.trackingId}" />
<h:panelGroup border="15" id="panel"
rendered="#{not empty testBean.list}">
<h:commandButton action="#{testBean.render}" value="Clear Panel">
<f:ajax execute="#this" render="panel trackingIdValue" />
</h:commandButton>
</h:panelGroup>
</h:form>
</h:body>
</html>
When I remove the header tag the ajax request works fine with both the inputtext and the panel. But when I add my stylesheets in the header like above ajax only works with the inputtext.