Broken photo slideshow transition
Categories
(Core :: CSS Transitions and Animations, defect, P3)
Tracking
()
| Tracking | Status | |
|---|---|---|
| firefox70 | --- | affected |
People
(Reporter: oanaarbuzov, Unassigned)
References
()
Details
Attachments
(3 files)
TransitionAnimation.gif
Environment
Browser / Version: Firefox Nightly 70.0a1 (2019-08-28)
Operating System: Windows 10 Pro
Steps to reproduce:
1. Navigate to https://www.msn.com/en-xl/asia/photos/shockingly-realistic-robots/ss-AAxiMLu#image=7
2. Click the photo slideshow arrows.
3. Observe slide transition.
Expected Behavior:
Slide transition is smooth.
Actual Behavior:
Slide transition is broken (previous photo seems to be displayed again in between the slides).
Note
1. Not reproducible on Chrome 76.0.3809.132.
2. Gif attached.
3. Created performance profile.
Affected area:
<article class="flex gallery-container none loaded" data-aop="galleryflex" data-id="46" data-m="{"i":46,"p":45,"n":"gallery","y":8,"o":1}" role="application" data-nativead-placements="article_aside:3;singlecard1:1;singlecard2:1;singlecard3:1;singlecard4:1;singlecard5:1;singlecard6:1;singlecard7:1;singlecard8:1;singlecard9:1;singlecard10:1;singlecard11:1;" aria-label="slideshow">
<section class="gallery unselectable" data-aop="galleryflex_slide" data-click-behavior="GoToNextSlide">
<ul class="slideshow loaded" role="list" data-next-url="/en-xl/asia/life-arts/hilarious-and-memorable-dialogues-from-superhero-films/ss-BBUl4Lj" tabindex="0" style="width: 17977.5px; transform: translateX(-799px);">
<li class="">
<div class="imgcontainer" data-image-size="2500,1779" data-id="47" data-m="{"i":47,"p":46,"n":"image1","y":14,"o":1}">
<img alt="Slide 1 of 22: The HRP-4C humanoid robot "Miim" presents a wedding dress by Japanese designer Yumi Katsura during the 2009 Yumi Katsura Paris Grand Collection in Osaka, western Japan, July 22, 2009. REUTERS/Toru Hanai (JAPAN ENTERTAINMENT SOCIETY SCI TECH)" data-src="{"default":"//img-s-msn-com.akamaized.net/tenant/amp/entityid/AAx8YPp.img?h=416&w=799&m=6&q=60&u=t&o=f&l=f&x=752&y=507","size3column":"//img-s-msn-com.akamaized.net/tenant/amp/entityid/AAx8YPp.img?h=416&w=624&m=6&q=60&u=t&o=f&l=f&x=752&y=507","size2column":"//img-s-msn-com.akamaized.net/tenant/amp/entityid/AAx8YPp.img?h=416&w=624&m=6&q=60&u=t&o=f&l=f&x=752&y=507"}" role="presentation" src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAx8YPp.img?h=416&w=799&m=6&q=60&u=t&o=f&l=f&x=752&y=507" title="Miim - Toru Hanai/Reuters" class="loaded">
</div>
</li>
<li class="show">
<div class="imgcontainer" data-image-size="4207,2805" data-id="48" data-m="{"i":48,"p":46,"n":"image2","y":14,"o":2}">
<img alt="Slide 2 of 22: TORONTO, ON - APRIL 30: Saudi Arabian citizen Humanoid Robot Sophia is seen during the Discovery exhibition on April 30, 2018 in Toronto, Canada. (Phoo by Yu Ruidong/China News Service/VCG via Getty Images)" data-src="{"default":{"load":"wait","src":"//img-s-msn-com.akamaized.net/tenant/amp/entityid/AAx9kxh.img?h=416&w=799&m=6&q=60&u=t&o=f&l=f&x=2659&y=963"},"size3column":{"load":"wait","src":"//img-s-msn-com.akamaized.net/tenant/amp/entityid/AAx9kxh.img?h=416&w=624&m=6&q=60&u=t&o=f&l=f&x=2659&y=963"},"size2column":{"load":"wait","src":"//img-s-msn-com.akamaized.net/tenant/amp/entityid/AAx9kxh.img?h=416&w=624&m=6&q=60&u=t&o=f&l=f&x=2659&y=963"}}" role="presentation" src="https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AAx9kxh.img?h=416&w=799&m=6&q=60&u=t&o=f&l=f&x=2659&y=963" title="Sophia - Yu Ruidong/China News Service/VCG via Getty Images" class="loaded">
</div>
</li>
<!--cut out-->
</article>
|
Reporter | |
Comment 1•5 years ago
|
||
Added Performance profile file.
|
||
Comment 2•5 years ago
|
||
I'm not sure this is actually a performance bug. I think it's to do with the app triggering multiple transitions on the same element when it only intends to trigger one.
I haven't debugged why it is triggering multiple transitions on Firefox and not on other browsers, however.
|
|
||
Comment 3•5 years ago
|
||
Adding webcompat:needs-diagnosis flag since this really needs someone to work out which of the millions of scripts on this page is triggering the transition so we can work out why the behavior differs.
|
||
Comment 4•5 years ago
|
||
note that it doesn't reproduce on macbook. At least i have not been able myself to reproduce.
|
|
||
Comment 5•5 years ago
|
||
I think the new DOM mutation breakpoints feature (prefs: devtools.debugger.features.dom-mutation-breakpoints, devtools.markup.mutationBreakpoints.enabled) could be helpful in diagnosing this. We just need to watch for attribute modifications on the ul.slideshow.loaded element from the above screenshot since the transitions appear to be triggered by directly modifying inline style.
|
|
||
Comment 6•5 years ago
|
||
this is partly controlled by.
function gt(t) {
var i = k.eq(t),
r = sr.eq(t),
u = hr.eq(t),
f;
(it != undefined &&
ct != undefined &&
i.hasClass(w) &&
r.hasClass(w) &&
u.hasClass(w)) ||
((f = n("img", i).attr("alt")),
or.text(f),
it &&
it.hasClass(w) &&
ct.hasClass(w) &&
(it.removeClass(w),
pi.removeClass(w),
wt
? ri
.stop(!0, !0)
.animate(
{
opacity: "0"
},
150
)
.removeClass("update")
: ct.removeClass(w)),
(it = i.addClass(w)),
(pi = u.addClass(w)),
wt && ct
? setTimeout(function() {
ct.removeClass(w);
ct = r.addClass(w);
ri.stop(!0, !0)
.css("opacity", 1)
.addClass("update");
}, 150)
: (ct = r.addClass(w)),
a.adjustThumbnailContainer(it, fi),
n("img", ct).each(function() {
oi(this);
}),
vt || (ht.scrollTop(0), wt && gr()));
}
|
|
||
Comment 7•5 years ago
|
||
Hmm, none of that appears to be setting the transform in inline style (or at least not directly).
|
|
||
Updated•3 years ago
|
|
||
Comment 8•2 years ago
|
||
Doesn't seem like this is still a performance issue anymore, the site moves smoothly for me. Closing for now, but please reopen if this still happens.
|
|
Reporter | |
Comment 9•2 years ago
|
||
I can confirm that the slideshow transition runs smoothly now.
Tested with:
Browser / Version: Firefox Nightly 105.0a1 (2022-07-27)
Operating System: Windows 10 Pro
Description
•