Bug 224415

Summary: position: sticky with display: inline-block
Product: WebKit Reporter: Atomkind <maiksweb3>
Component: Layout and RenderingAssignee: Martin Robinson <mrobinson>
Status: RESOLVED FIXED    
Severity: Normal CC: bfulgham, changseok, dan, esprehn+autocc, ews-watchlist, glenn, gyuyoung.kim, hartman.wiki, heycam, jianbo.wu, kondapallykalyan, macpherson, menard, mrobinson, pdr, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar
Version: Safari 14   
Hardware: Unspecified   
OS: Unspecified   
Bug Depends on:    
Bug Blocks: 203450, 228989    
Attachments:
Description Flags
Patch
none
Patch none

Atomkind
Reported 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 :-)
Attachments
Patch (15.22 KB, patch)
2021-08-17 02:22 PDT, Martin Robinson 		no flags
DetailsFormatted DiffDiff
Patch (15.23 KB, patch)
2021-08-18 03:57 PDT, Martin Robinson 		no flags
DetailsFormatted DiffDiff
Show Obsolete (1) View All Add attachment proposed patch, testcase, etc.
Atomkind
Comment 1 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!
Radar WebKit Bug Importer
Comment 2 2021-04-18 03:56:13 PDT
<rdar://problem/76811968>
Martin Robinson
Comment 3 2021-08-17 02:22:39 PDT
Created attachment 435673 [details] Patch
Simon Fraser (smfr)
Comment 4 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().
Martin Robinson
Comment 5 2021-08-18 03:57:48 PDT
Created attachment 435759 [details] Patch
Martin Robinson
Comment 6 2021-08-18 06:19:39 PDT
Comment on attachment 435759 [details] Patch Thanks for the review!
EWS
Comment 7 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].
Martin Robinson
Comment 8 2021-08-25 03:55:25 PDT
*** Bug 218330 has been marked as a duplicate of this bug. ***
Martin Robinson
Comment 9 2021-08-25 03:55:36 PDT
*** Bug 190580 has been marked as a duplicate of this bug. ***
Martin Robinson
Comment 10 2021-08-25 04:00:14 PDT
*** Bug 209376 has been marked as a duplicate of this bug. ***
Note You need to log in before you can comment on or make changes to this bug.