Notre page Web scintille sur iPads après avoir ajouté des images ou un texte à la page à l'aide de JavaScript. Nous avons essayé diverses combinaisons de Le problème est déclenché ici: P> -webkit-backface-visibilité: masqué; -webkit-transformer-style: conserve-3D; -WebKit-Transform: TRUCLATE3D (0,0,0) CODE> contre différents éléments. Depuis que nous cordons une image d'arrière-plan, nous ne pouvons pas appliquer ces styles au corps, mais nous pouvons les appliquer à toutes les divs, ce qui aide mais ne supprime pas le problème. $( screenshots ).each( function() {
var img = $( document.createElement('img') );
// Set image source
img.attr( 'src', this );
// Append new screenshot
screenshots_box.append( img );
});
// Render description
$( page ).find( '.desc' ).html( data.description.replace(/\n/g, '<br/>') );
$( page ).find( '.desc' ).removeClass( 'loading' );
5 Réponses :
Je ne suis pas sûr que ceci est une solution ou non, mais c'est une suggestion:
Que diriez-vous de définir l'affichage de l'IMG et voyez si le scintillement s'arrête: P>
$('img').css('display', 'block'); or $('img').show()
Peut-être que vous devriez spécifier la taille des images explicitement pour améliorer les performances de rendu et éviter de scintiller la mise à l'échelle des images.
Mon conseil est si elle charge correctement les images correctement, puis écrasant, puis essayez d'utiliser certaines techniques d'optimisation, telles que l'utilisation de la taille de l'image définie et miniez de grands scripts, car il semble que cela ressemble à un problème de temps de charge, si le Les scripts et les CSS sont minifiés la page fonctionnera plus rapidement, ce qui peut réduire / éliminer le scintillement. De plus, la solution de Sammy pourrait aider. (Si cela le fait, il mérite le crédit et ignore-moi)
Je ne sais pas exactement si cela résoudra votre problème, mais vous pouvez certainement faire une optimisation massive aux charges d'image.
Tout d'abord, vous pouvez charger tous les nœuds à un fragment de document Deuxièmement, vous pouvez attendre que les images se chargent avec l'événement ci-dessous, J'ai combiné les deux méthodes, le code ci-dessous chargera des images sur un fragment de document et lorsque la dernière image est chargée, elle ajoute le fragment de document à la DOM. P> // First, let's create a document fragment for the nodes
var docfrag = document.createDocumentFragment();
// Then count the screenshots
var total = screenshots.length;
// Loop through all image sources
$(screenshots).each(function(){
// Create the img node with jquery, note that how you can pass
// all attributes to the node with a second parameter object
// Plus let's hook the image's load event
// Append the created img node immediately to the document fragment
docfrag.appendChild($("<img />", {
"src" : this
}).on("load", function(){
// we decrease the total variable, and if it reached zero( all images loaded )
// we attach the document fragment to the screenshot box
// ( I assume screenshots_box is a jquery object, so I need the first element of it )
if(!--total){
screenshots_box[0].appendChild(docfrag);
}
})[0]);
});
ajoutez ceci avant tag et voir les résultats
Avez-vous essayé d'ajouter tous les éléments IMG à la fois, plutôt qu'à un à la fois dans la boucle?
@alnafie, oui. Même si nous retirons les images et mettez uniquement à jour le texte, ce scintillement arrive.
Vous avez une tonne de règles SLOW WebKit CSS. Les règles WebKit ne sont pas toujours optimisées comme des versions CSS3. La boîte-ombre, la RGBA, les transformations, la marge automatique et l'opacité en particulier sont difficiles à rendre. Je pense que vous utilisez presque toutes ces fonctionnalités sur ce qui pourrait être une page simple.