Bug 304073 – instagram.com: Some reels get resized back and forth while playing

• Component: New Bugs
• Status: RESOLVED FIXED

[Sammy Gill]

rdar://164573070

[Sammy Gill]

Some notes from an investigation

From SourceBufferParserAVFObjC::didProvideMediaDataForTrackID:

12631190667774328833 presentationSize width=360 height=640presentationTime {"value":0,"numerator":0,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=360 height=640presentationTime {"value":0.13333333333333333,"numerator":2048,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=360 height=640presentationTime {"value":0.06666666666666667,"numerator":1024,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=360 height=640presentationTime {"value":0.03333333333333333,"numerator":512,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=360 height=640presentationTime {"value":0.1,"numerator":1536,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=360 height=640presentationTime {"value":0.26666666666666666,"numerator":4096,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=360 height=640presentationTime {"value":0.2,"numerator":3072,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=360 height=640presentationTime {"value":0.16666666666666666,"numerator":2560,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=360 height=640presentationTime {"value":0.23333333333333334,"numerator":3584,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=360 height=640presentationTime {"value":0.4,"numerator":6144,"denominator":15360,"flags":1}

Then once we hit 5 seconds we get:
12631190667774328833 presentationSize width=720 height=1280presentationTime {"value":5,"numerator":76800,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=720 height=1280presentationTime {"value":5.133333333333334,"numerator":78848,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=720 height=1280presentationTime {"value":5.066666666666666,"numerator":77824,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=720 height=1280presentationTime {"value":5.033333333333333,"numerator":77312,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=720 height=1280presentationTime {"value":5.1,"numerator":78336,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=720 height=1280presentationTime {"value":5.266666666666667,"numerator":80896,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=720 height=1280presentationTime {"value":5.2,"numerator":79872,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=720 height=1280presentationTime {"value":5.166666666666667,"numerator":79360,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=720 height=1280presentationTime {"value":5.233333333333333,"numerator":80384,"denominator":15360,"flags":1}
12631190667774328833 presentationSize width=720 height=1280presentationTime {"value":5.4,"numerator":82944,"denominator":15360,"flags":1}


Here is some cleaned up markup from the page. I compared both the working and bugged cases and it seems like the styling is basically the same from the perspective of sizing the video element.

<div class="x78zum5 xedcshv" style="height: 1046px; width: 588.375px;">
    <div class="x78zum5 xl56j7k x1n2onr6 xh8yej3">
        <img …>
        <div
            style="inset-inline-start: -32px; pointer-events: none; position: absolute; transition: bottom 0.2s ease-in-out; z-index: 1; bottom: 152px;">
        </div>
        <div class="x1i5p2am x1whfx0g xr2y4jy x1ihp6rs x1yxe93k x6ikm8r x10wlt62">
            <div class="x1lliihq x5yr21d x1n2onr6 xh8yej3 x1ja2u2z">
                <div class="x5yr21d x1n2onr6 xh8yej3">
                    <div class="x5yr21d x1n2onr6 xh8yej3">
                        <div class="x5yr21d x1uhb9sk xh8yej3">
                          <video class="x1lliihq x5yr21d xh8yej3" playsinline=""
                                preload="none" src="blob:https://www.instagram.com/7c0b8faf-27e3-439d-8800-1729d013e8c4"
                                style="display: block;"></video>
                            <div data-instancekey="id-vpuid-f7fd78841f57b5cad">

                              This content does not actually contribute to the max-content size of flex item in the root container above.
                              If you remove this from the markup the size of the content remains the same.

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

The root element here gets a fixed width and height value that the site seems to determine somehow. There is a single flex item in here, which is another flexbox, that has width: 100%.  This flexbox has a few different children. The first is an img, which is basically the same size as the parent, but it’s absolutely positioned so it is OOF. Same for the second child. 

The third child, however, *is* in flow positioned and actually contains the video element as a descendant. This child is a flex item and has an auto width, so flex layout is going to determine the size of the content. The rest of the descendants, except the video itself, have width: 100% so the video’s content is going to determine the size of the flex item. This also seems to be correct with regards to what we are seeing in the content and the different sizes of the video we are getting.

[Sammy Gill]

Pull request: https://github.com/WebKit/WebKit/pull/55321

[EWS]

Committed 304389@main (33c9b9456802): <https://commits.webkit.org/304389@main>

Reviewed commits have been landed. Closing PR #55321 and removing active labels.