Bug 224415 - position: sticky with display: inline-block
Summary: position: sticky with display: inline-block
Status: RESOLVED FIXED
Alias: None
Product: WebKit
Classification: Unclassified
Component: Layout and Rendering (show other bugs)
Version: Safari 14
Hardware: Unspecified Unspecified
: P2 Normal
Assignee: Martin Robinson
URL:
Keywords: InRadar
: 190580 209376 218330 (view as bug list)
Depends on:
Blocks: 203450 228989
  Show dependency treegraph
 
Reported: 2021-04-11 03:55 PDT by Atomkind
Modified: 2021-08-27 01:03 PDT (History)
18 users (show)

See Also:


Attachments
Patch (15.22 KB, patch)
2021-08-17 02:22 PDT, Martin Robinson
no flags Details | Formatted Diff | Diff
Patch (15.23 KB, patch)
2021-08-18 03:57 PDT, Martin Robinson
no flags Details | Formatted Diff | Diff

Note You need to log in before you can comment on or make changes to this bug.
Description Atomkind 2021-04-11 03:55:32 PDT
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 :-)
Comment 1 Atomkind 2021-04-16 11:37:26 PDT
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!
Comment 2 Radar WebKit Bug Importer 2021-04-18 03:56:13 PDT
<rdar://problem/76811968>
Comment 3 Martin Robinson 2021-08-17 02:22:39 PDT
Created attachment 435673 [details]
Patch
Comment 4 Simon Fraser (smfr) 2021-08-17 20:39:35 PDT
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().
Comment 5 Martin Robinson 2021-08-18 03:57:48 PDT
Created attachment 435759 [details]
Patch
Comment 6 Martin Robinson 2021-08-18 06:19:39 PDT
Comment on attachment 435759 [details]
Patch

Thanks for the review!
Comment 7 EWS 2021-08-18 06:30:12 PDT
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].
Comment 8 Martin Robinson 2021-08-25 03:55:25 PDT
*** Bug 218330 has been marked as a duplicate of this bug. ***
Comment 9 Martin Robinson 2021-08-25 03:55:36 PDT
*** Bug 190580 has been marked as a duplicate of this bug. ***
Comment 10 Martin Robinson 2021-08-25 04:00:14 PDT
*** Bug 209376 has been marked as a duplicate of this bug. ***