Bug 281325 – ep.gov.pk: <marquee> is hidden behind <div>

• Status: RESOLVED
• Resolution: FIXED
• Component: Layout and Rendering

[Ahmad Saleem]

Created attachment 472914 [details]
Safari vs Firefox (Reference Screenshot)

Hi Team,

While scrolling through stumbled upon another bug report.

*** Steps to reproduce ***

1. Go to - https://ep.gov.pk and close dialog
2. Notice on right side red container

*** Actual Result ***

marquee is behind <div> container

*** Expected Result ***

marquee should be below <div> like Chrome Canary 131 and Firefox Nightly 132

___

Just raising so we can fix it.

Thanks!

[Radar WebKit Bug Importer]

<rdar://problem/137766071>

[Karl Dubost]

The second marquee element is part of a nested table, which itself contains a series of div inside a td element. 

This is the basic structure. 

```
<td height="90"
    valign="top"
    align="center">

  <div style="float:left; background:url(/images/menu_left.gif) no-repeat; width:27px; height:84px;"></div>

  <div style="float:left; background:url(/images/menu_min.gif) repeat-x; width:937px; height:84px;">
    <div id="menu_top"
         align="center">

      <ul>
        …
      </ul>
    </div>
    <br>
    <div id="menu_bot"
         align="center"
         style="margin-left: 1px !important;">

      <ul>
        …
      </ul>
    </div>
  </div>

  <div style="float:left; background:url(/images/menu_right.gif) no-repeat; width:27px; height:84px;"></div>

  <div>
    <marquee style="color:#be0101;font-weight:bold">Pakistan Post never asks for any online payment through its website.
      Beware of any message containing any malicious link.The official websites are <a
         href="https://ep.gov.pk">www.ep.gov.pk</a>
      and <a href="https://www.pakpost.gov.pk"
         target="_blank">www.pakpost.gov.pk<!--</a>-->.</a></marquee>
  </div>

</td>
```

if disable and re-enable the `float: left` in the div just above the marquee element,  suddenly the scrolling text reappears. So it seems more like something which is about layout and rendering not properly computing the space for each elements.

[Karl Dubost]

if I give a width: 100% to the marquee tag it takes suddenly the full width and becomes visible. but if I remove if the width: 100%, it doesn't hide again. So this is really about the initial computation of the marquee element.

[Karl Dubost]

Marquee element is defined in https://searchfox.org/wubkat/source/Source/WebCore/html/HTMLMarqueeElement.cpp

with the Render being

https://searchfox.org/wubkat/rev/d45649fa32a499702c30474e94bd6843c4c67849/Source/WebCore/html/HTMLMarqueeElement.cpp#209-217

RenderMarquee* HTMLMarqueeElement::renderMarquee() const
{
    if (!renderer() || !renderer()->hasLayer())
        return nullptr;
    auto* scrollableArea = renderBoxModelObject()->layer()->scrollableArea();
    if (!scrollableArea)
        return nullptr;
    return scrollableArea->marquee();
}

[Ahmad Saleem]

Adding `-webkit-fill-available` similar to Blink in `html.css` (but proposed as here - https://github.com/whatwg/html/issues/10249)

marquee {
    inline-size: -webkit-fill-available;
}

^ It does fix this issue. Need to think of now test case.

[Ahmad Saleem]

Reduction - https://jsfiddle.net/anqcmdju/6/

[Ahmad Saleem]

Broken - https://jsfiddle.net/0hju2bmr/
Expectation - https://jsfiddle.net/mcrqzpuL/

[zalan]

Created attachment 473779 [details]
[fast-cq]Patch

[EWS]

Committed 288461@main (efdea8f207ac): <https://commits.webkit.org/288461@main>

All reviewed patches have been landed. Closing bug and clearing flags on attachment 473779 [details].