https://jam.dev/c/24cc6664-3e72-4a55-bc6b-e77bc0a9ca36
slider appear lauout shift,
slider is one row, but on loading, it will show 1 column,then change to 1 row
Hi,
Thanks so much for your report!
As far as I can see, you are trying to force the slider to scroll continuously, for which the one line of CSS is not sufficient.
Splide needs the auto scroll extension for this.
Best regards,
timmse
if i just use normal Slider (Nestable),
There also be very big CLS,
slider is one row, but on loading, it will show 1 column,then change to 1 row.
for Slider (Nestable) element,
have any method to solve it
Hey timchen,
That’s exactly what you said in your initial report, but I can’t replicate it and I can’t see it on your website.
Can you give me a live link and the slider as template.json so that I can see the problem and reproduce it if necessary?
I have this exact same problem.
How can we fix it?
@timmse hello, any update for this?
Unfortunately not yet, but I bookmarked the thread and check it again as soon as possible 
Please make it happen, it makes using SplideJS Slider unusable (at least for me).
Thank you!
1 Like
Hi @timchen & @jcsneves ,
Can you please provide me with
- a live link
- The page/template as a template.json
Unfortunately I’m still unable to replicate the issues your encountering.
That’s right, since images, CSS and JS needs some time to load. Just because the Internet speed is lower, the files do not become smaller. However, without a live link and the template, I can’t say anything concrete, as there are far too many variables that can influence the loading speed.
Any slider can find this problem.
like this: slider cls test – TimTOP Club
{"content":[{"id":"kmhwzi","name":"section","parent":0,"children":["evtxtb"],"settings":{"animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse","_background":{"color":{"raw":"var(--cf-c002-30)","id":"01GXBWJMZX793Y156N940FCB3G.30","name":"c002-30"}}}},{"id":"evtxtb","name":"container","parent":"kmhwzi","children":["hwxjio"],"settings":{"wooQueryTpes":"none","productType":["all"],"productStatus":["publish"],"productsNumber":3,"cat_operator":"IN","outofstock":"yes","show_hidden":"no","hide_free":"no","order_by":"date","ordersType":"all","ordersCustomer":"logged_in","order":"DESC","exclude_expiry_coupons":true,"buQueryTpes":"none","postPrevNext":"prev","inSameTerm":"no","taxonomy":"category","mbRelQueryType":"post","mbRelationId":"none","mbRelFecthing":"from","menuSlug":"none","animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse","_padding":{"top":"10","bottom":"10"}}},{"id":"hwxjio","name":"slider-nested","parent":"evtxtb","children":["kqnada","tbrfnz","coqedf","jvilqb","qgbzdl","swsqan"],"settings":{"pagination":true,"height":"auto","perPage":"5","paginationBottom":"-30"}},{"id":"kqnada","name":"block","parent":"hwxjio","children":["nmiegz","umammr"],"settings":{"wooQueryTpes":"none","productType":["all"],"productStatus":["publish"],"productsNumber":3,"cat_operator":"IN","outofstock":"yes","show_hidden":"no","hide_free":"no","order_by":"date","ordersType":"all","ordersCustomer":"logged_in","order":"DESC","exclude_expiry_coupons":true,"buQueryTpes":"none","postPrevNext":"prev","inSameTerm":"no","taxonomy":"category","mbRelQueryType":"post","mbRelationId":"none","mbRelFecthing":"from","menuSlug":"none","fsnAction":"hide","animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse"},"label":"Slide 1"},{"id":"nmiegz","name":"text-basic","parent":"kqnada","children":[],"settings":{"text":"AAA","animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse"}},{"id":"umammr","name":"icon","parent":"kqnada","children":[],"settings":{"icon":{"library":"themify","icon":"ti-star"},"animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse","iconSize":"50","iconColor":{"raw":"var(--cf-dark)","id":"01H7XJZ4GBR5DD6Q0547QE5P4H","name":"dark"}}},{"id":"tbrfnz","name":"block","parent":"hwxjio","children":["ltzeqi","nftqwg"],"settings":{"wooQueryTpes":"none","productType":["all"],"productStatus":["publish"],"productsNumber":3,"cat_operator":"IN","outofstock":"yes","show_hidden":"no","hide_free":"no","order_by":"date","ordersType":"all","ordersCustomer":"logged_in","order":"DESC","exclude_expiry_coupons":true,"buQueryTpes":"none","postPrevNext":"prev","inSameTerm":"no","taxonomy":"category","mbRelQueryType":"post","mbRelationId":"none","mbRelFecthing":"from","menuSlug":"none","fsnAction":"hide","animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse"},"label":"Slide 2"},{"id":"ltzeqi","name":"text-basic","parent":"tbrfnz","children":[],"settings":{"text":"BBB","animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse"}},{"id":"nftqwg","name":"icon","parent":"tbrfnz","children":[],"settings":{"icon":{"library":"themify","icon":"ti-spray"},"animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse","iconSize":"50","iconColor":{"raw":"var(--cf-dark)","id":"01H7XJZ4GBR5DD6Q0547QE5P4H","name":"dark"}}},{"id":"coqedf","name":"block","parent":"hwxjio","children":["axtnim","wpjygr"],"settings":{"wooQueryTpes":"none","productType":["all"],"productStatus":["publish"],"productsNumber":3,"cat_operator":"IN","outofstock":"yes","show_hidden":"no","hide_free":"no","order_by":"date","ordersType":"all","ordersCustomer":"logged_in","order":"DESC","exclude_expiry_coupons":true,"buQueryTpes":"none","postPrevNext":"prev","inSameTerm":"no","taxonomy":"category","mbRelQueryType":"post","mbRelationId":"none","mbRelFecthing":"from","menuSlug":"none","fsnAction":"hide","animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse"},"label":"Slide 3"},{"id":"axtnim","name":"text-basic","parent":"coqedf","children":[],"settings":{"text":"CCC","animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse"}},{"id":"wpjygr","name":"icon","parent":"coqedf","children":[],"settings":{"icon":{"library":"themify","icon":"ti-signal"},"animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse","iconSize":"50","iconColor":{"raw":"var(--cf-dark)","id":"01H7XJZ4GBR5DD6Q0547QE5P4H","name":"dark"}}},{"id":"jvilqb","name":"block","parent":"hwxjio","children":["uzpank","etvhiv"],"settings":{"wooQueryTpes":"none","productType":["all"],"productStatus":["publish"],"productsNumber":3,"cat_operator":"IN","outofstock":"yes","show_hidden":"no","hide_free":"no","order_by":"date","ordersType":"all","ordersCustomer":"logged_in","order":"DESC","exclude_expiry_coupons":true,"buQueryTpes":"none","postPrevNext":"prev","inSameTerm":"no","taxonomy":"category","mbRelQueryType":"post","mbRelationId":"none","mbRelFecthing":"from","menuSlug":"none","fsnAction":"hide","animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse"},"label":"Slide 4"},{"id":"uzpank","name":"text-basic","parent":"jvilqb","children":[],"settings":{"text":"DDD","animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse"}},{"id":"etvhiv","name":"icon","parent":"jvilqb","children":[],"settings":{"icon":{"library":"themify","icon":"ti-shopping-cart-full"},"animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse","iconSize":"50","iconColor":{"raw":"var(--cf-dark)","id":"01H7XJZ4GBR5DD6Q0547QE5P4H","name":"dark"}}},{"id":"qgbzdl","name":"block","parent":"hwxjio","children":["ajoqvc","zeafaq"],"settings":{"wooQueryTpes":"none","productType":["all"],"productStatus":["publish"],"productsNumber":3,"cat_operator":"IN","outofstock":"yes","show_hidden":"no","hide_free":"no","order_by":"date","ordersType":"all","ordersCustomer":"logged_in","order":"DESC","exclude_expiry_coupons":true,"buQueryTpes":"none","postPrevNext":"prev","inSameTerm":"no","taxonomy":"category","mbRelQueryType":"post","mbRelationId":"none","mbRelFecthing":"from","menuSlug":"none","fsnAction":"hide","animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse"},"label":"Slide 5"},{"id":"ajoqvc","name":"text-basic","parent":"qgbzdl","children":[],"settings":{"text":"EEE","animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse"}},{"id":"zeafaq","name":"icon","parent":"qgbzdl","children":[],"settings":{"icon":{"library":"themify","icon":"ti-settings"},"animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse","iconSize":"50","iconColor":{"raw":"var(--cf-dark)","id":"01H7XJZ4GBR5DD6Q0547QE5P4H","name":"dark"}}},{"id":"swsqan","name":"block","parent":"hwxjio","children":["glvsnp","npclfv"],"settings":{"wooQueryTpes":"none","productType":["all"],"productStatus":["publish"],"productsNumber":3,"cat_operator":"IN","outofstock":"yes","show_hidden":"no","hide_free":"no","order_by":"date","ordersType":"all","ordersCustomer":"logged_in","order":"DESC","exclude_expiry_coupons":true,"buQueryTpes":"none","postPrevNext":"prev","inSameTerm":"no","taxonomy":"category","mbRelQueryType":"post","mbRelationId":"none","mbRelFecthing":"from","menuSlug":"none","fsnAction":"hide","animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse"},"label":"Slide 6"},{"id":"glvsnp","name":"text-basic","parent":"swsqan","children":[],"settings":{"text":"FFF","animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse"}},{"id":"npclfv","name":"icon","parent":"swsqan","children":[],"settings":{"icon":{"library":"themify","icon":"ti-cut"},"animation_type_text_split_overflow":true,"animation_type_img_effect_reveal_dir_offset":"0","animation_type_img_effect_parallax_vol":20,"animation_type_img_effect_parallax_dir":"vertical","animation_type_img_effect_parallax_pan":"negative","animation_toggle_actions_onenter":"play","animation_toggle_actions_onleave":"play","animation_toggle_actions_onenterback":"resume","animation_toggle_actions_onleaveback":"reverse","iconSize":"50","iconColor":{"raw":"var(--cf-dark)","id":"01H7XJZ4GBR5DD6Q0547QE5P4H","name":"dark"}}}],"source":"bricksCopiedElements","sourceUrl":"https://timtop.club","version":"1.11","globalClasses":[],"globalElements":[]}
Thanks for the link and the json!
I tested both, your link and the provided template on a try.bricksbuilder installation with Lighthouse.
I can’t confirm both statements since the Lighthouse CLS (Cumulative layout shift) score on both sites is 0 with multiple tests in a row, both on mobile and desktop, and even if the throttling is set to 3g (which shouldn’t be a real-life case nowadays - at least not where I live).
Your site:
try.bricksbuilder:
So, the results regarding CLS are pretty straightforward. However, I can see a difference in LCP and FCP, which is probably related to different server performances on which we have no influence.
To rule out a lighthouse problem, I reran the same tests with gtmetrix. The results for CLS are identical:
So again, the results regarding CLS are pretty straightforward.