[RESOLVIDO] Compatibilidade PrimeFaces carousel + Chrome

Front-end
#1

Pessoal ja vi em alguns lugares que o Primefaces tem uns problemas de compatibilidade com o Chrome, Mas mesmo aplicando a solução indicada no forum do Primefaces não consegui resolver!

Segue o codigo da Pagina!

<f:view contentType="text/html"> 
	
		
		<p:carousel itemStyleClass="itemCarousel" pageLinks="4" autoPlayInterval="4000"   
        	numVisible="1" effect="easeInStrong" var="produto" circular="true" value="#{produtoBean.destaques}">  
		    
		    <p:graphicImage value="#{produto.imagem}"/>
		     
		     <h:panelGrid>
		     	<h:outputText value="Nome: " /><h:outputText id="nome" value="#{produto.nomeProduto}" />  
		     </h:panelGrid>
		    	       		 
		</p:carousel>  
		
	</f:view>

Em outro navegador funciona!! Só o Crhome que não renderiza bem o componente! Alguem sabe alguma forma de resolver isso? Estou usando a versão 3.4.2 do Primefaces, mas ja testei com a 3.5 continua da mesma forma!!

#2

Finalmente consegui resolver!
A solução parece meio estranha, mas fui no repositorio do Primafaces e descobri que estava fazendo tudo certo seguindo o código do Showcases deles!!

Aparentemente o problema do primefaces carousel com o Crhome é que ele não carrega nada da folha de estilo, eu poderia definir qualquer tamanho pra ele que não iria adiantar!!
Então pra resolver, o estilo do componente tem que ser definido na mesma pagina que está o componente, Simples!!

Esse é o codigo que eles utilizam no http://www.primefaces.org/showcase/ui/carouselSlideshow.jsf


<ui:composition xmlns="http://www.w3.org/1999/xhtml"
        xmlns:ui="http://java.sun.com/jsf/facelets"
        xmlns:h="http://java.sun.com/jsf/html"
        xmlns:f="http://java.sun.com/jsf/core"
        xmlns:p="http://primefaces.org/ui"
        template="../templates/ui.xhtml">
        
        <ui:define name="head">

<!--   definindo o estilo aqui o problema se resolve -->

                <style type="text/css">
                        .photo {
                                width:400px;
                                height:250px;
                        }
                </style>
        </ui:define>
        
        <ui:define name="content">
        
                <h1 class="title ui-widget-header ui-corner-all">Carousel - SlideShow</h1>
                <div class="entry">
                        <p>Using autoPlay feature, carousel can be used to display a slideshow.</p>
                
            <h3>Horizontal</h3>
                        <p:carousel id="slideShow" autoPlayInterval="4000" numVisible="1" 
                                        effect="easeInStrong" circular="true" pageLinks="4" itemStyleClass="photo">
                                <p:graphicImage value="/images/nature1.jpg"/>
                                <p:graphicImage value="/images/nature2.jpg"/>
                                <p:graphicImage value="/images/nature3.jpg"/>
                                <p:graphicImage value="/images/nature4.jpg"/>
                        </p:carousel>
            
            <h3>Vertical</h3>
                        <p:carousel autoPlayInterval="4000" numVisible="1" 
                                        effect="easeInStrong" circular="true" vertical="true" itemStyleClass="photo">
                                <p:graphicImage value="/images/nature1.jpg"/>
                                <p:graphicImage value="/images/nature2.jpg"/>
                                <p:graphicImage value="/images/nature3.jpg"/>
                                <p:graphicImage value="/images/nature4.jpg"/>
                        </p:carousel>
                
                        
                        <h3>Source</h3>
                        <p:tabView>
                                <p:tab title="carouselSlideshow.xhtml">
                                        <pre name="code" class="xml">
&lt;h3&gt;Horizontal&lt;/h3&gt;
&lt;p:carousel itemStyleClass="carItem" pageLinks="4" autoPlayInterval="4000" 
        numVisible="1" effect="easeInStrong" circular="true"&gt;
    &lt;p:graphicImage value="/images/nature1.jpg"/&gt;
    &lt;p:graphicImage value="/images/nature2.jpg"/&gt;
    &lt;p:graphicImage value="/images/nature3.jpg"/&gt;
    &lt;p:graphicImage value="/images/nature4.jpg"/&gt;
&lt;/p:carousel&gt;

&lt;h3&gt;Vertical&lt;/h3&gt;
&lt;p:carousel itemStyleClass="carItem" autoPlayInterval="4000" 
        numVisible="1" effect="easeInStrong" vertical="true" circular="true"&gt;
    &lt;p:graphicImage value="/images/nature1.jpg"/&gt;
    &lt;p:graphicImage value="/images/nature2.jpg"/&gt;
    &lt;p:graphicImage value="/images/nature3.jpg"/&gt;
    &lt;p:graphicImage value="/images/nature4.jpg"/&gt;
&lt;/p:carousel&gt;
                                        </pre>
                                </p:tab>
                        </p:tabView>
                
                </div>
        </ui:define>
</ui:composition>

Bom espero ter ajudado que estiver passando por esse problema!! comigo resolveu!!!

#3

Reativando o post.
cara será que teria alguma forma de colocar esse css em uma folha de estilo separada

#4

Martins,
basta declarar dentro do head:

Depois utilize styleClass=“classe” nos componentes.

#5

Sim ja tentei fazer desta forma… mas nao funciona estou em busca de uma solução…

#6