position: sticky with display: inline-block

• Component: Layout and Rendering
• Status: RESOLVED FIXED

[Atomkind]

Version:
Safari 14.0.3 (16610.4.3.1.7)

Reproduce:
- HTML-Document with an element CSS position: -webkit-sticky; AND display: inline-block;
- does not matter if sticky to the top or to the bottom
- see example: https://jsfiddle.net/vukdxrzg/

Description:
The element with position: sticky; is not alowed to be display: inline-block; it has to be display: block;
This should be allowed, it works on other common browsers.

Workaround / solution:
The only way is to add a wrapper around the element and give the position: sticky; and display: block; to the wrapper.
After that, it is possible to make the child element display: inline-block;

Another reason for many to create yet another wrapper as a workaround, of which there are already far too many :-)

[Atomkind]

some other examples of

how it should work (but does not on any browser!):
https://jsfiddle.net/m7uxthqg/3/

and

how it actually works but there are still some downsides: 
https://jsfiddle.net/heqbdw9x/

downside 1:
Have to add another wrapping element with display: block

downside 2:
:hover elements, labels, links, ankers - they are not clickable because of the overlapping block-wrapper!


Also adjustment:
working around with position: fixed would not work because this element need to be sticky, because there is a big footer element where the "to top" should not fly over!

[Radar WebKit Bug Importer]

<rdar://problem/76811968>

[Martin Robinson]

Created attachment 435673 [details]
Patch

[Simon Fraser (smfr)]

Comment on attachment 435673 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=435673&action=review

> Source/WebCore/rendering/RenderBoxModelObject.cpp:461
> +    if (this->isInline() && containingBlock->isAnonymousBlock())
> +        containingBlock = containingBlock->containingBlock();

I think it's possible to have multiple containing anonymous blocks so this should do something like nearestNonAnonymousContainingBlockIncludingSelf().

[Martin Robinson]

Created attachment 435759 [details]
Patch

[Martin Robinson]

Comment on attachment 435759 [details]
Patch

Thanks for the review!

[EWS]

Committed r281185 (240630@main): <https://commits.webkit.org/240630@main>

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

[Martin Robinson]

*** Bug 218330 has been marked as a duplicate of this bug. ***

[Martin Robinson]

*** Bug 190580 has been marked as a duplicate of this bug. ***

[Martin Robinson]

*** Bug 209376 has been marked as a duplicate of this bug. ***