StickyHeaders: Document browser compatibility policy on project page
Closed, ResolvedPublic2 Estimated Story Points
Actions

Description

Background

The style linter is flagging the usage of unsupported CSS properties: position: sticky and scroll-margin-top. If we intend to use properties that are unsupported in MediaWiki's modern grade A browsers, we should document a browser compatibility policy on the MediaWiki project page.

Browser compatibility:

Linter output:

Running "stylelint:all" (stylelint) task
>> resources/ext.readerExperiments.stickyHeaders.styles/stickyHeaders.less
>>    5:2  ⚠  Unexpected browser feature "css-sticky" is not supported by Chrome 49,50,51,52,53,54,55                                             plugin/no-unsupported-browser-features
>>   12:4  ⚠  Unexpected browser feature "css-snappoints" is not supported by Chrome 49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68  plugin/no-unsupported-browser-features
>> 
>> resources/ext.readerExperiments.stickyHeaders.legacy/styles/overrides.less
>>    9:3  ⚠  Unexpected browser feature "css-sticky" is not supported by Chrome 49,50,51,52,53,54,55                                             plugin/no-unsupported-browser-features
>>   16:4  ⚠  Unexpected browser feature "css-snappoints" is not supported by Chrome 49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68  plugin/no-unsupported-browser-features
>> 
>> ⚠ 4 problems (0 errors, 4 warnings)

Requirements

Consider adding CSS to improve support with older versions of Safari - older iPhone (cant upgrade to newer version)
Convert task - Lets check the status on the legacy status
Do a quick test on legacy version of iOS 12
Webkit sticky and position sticky
Look into how to test in old browsers

Acceptance Criteria

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Adds ignore lines to suppress warnings	mediawiki/extensions/ReaderExperiments	master	+4 -0

Customize query in gerrit

Event Timeline

lwatson created this task.Nov 19 2025, 2:37 AM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptNov 19 2025, 2:37 AM

HSwan-WMF triaged this task as High priority.Nov 19 2025, 6:05 PM

HSwan-WMF moved this task from Incoming/Inbox to Needs Refinement on the Reader Growth Team board.

HSwan-WMF moved this task from Needs Refinement to Sprint 5 (Nov 25 - Dec 9) Q2 25/26 on the Reader Growth Team board.Nov 21 2025, 6:31 PM

HSwan-WMF edited projects, added Reader Growth Team (Sprint 5 (Nov 25 - Dec 9) Q2 25/26); removed Reader Growth Team.

A_smart_kitten added a project: Documentation.Nov 23 2025, 6:09 PM

HSwan-WMF set the point value for this task to 2.Nov 25 2025, 5:22 PM

KSarabia-WMF claimed this task.Nov 26 2025, 6:12 PM

KSarabia-WMF moved this task from Committed to Doing on the Reader Growth Team (Sprint 5 (Nov 25 - Dec 9) Q2 25/26) board.

KSarabia-WMF updated the task description. (Show Details)Dec 1 2025, 7:09 PM

We intentionally use position: sticky and scroll-margin / scroll-snap to implement the sticky header.
We’ve tested on iPhone 11 Safari 13 via BrowserStack and behaviour is normal.

Screenshot 2025-12-03 at 9.27.23 PM.png (1×916 px, 701 KB)

The stylelint warnings are about Chrome 49–68; those are below MediaWiki’s modern grade-A target, so we’re treating these features as progressive enhancement and will:

either adjust browserslist to match MediaWiki’s grade-A support, or
configure plugin/no-unsupported-browser-features to ignore css-sticky / css-snappoints for this module.

Change #1214750 had a related patch set uploaded (by Kimberly Sarabia; author: Kimberly Sarabia):

[mediawiki/extensions/ReaderExperiments@master] Adds ignore lines to suppress warnings

https://gerrit.wikimedia.org/r/1214750

gerritbot added a project: Patch-For-Review.Dec 4 2025, 4:53 AM

KSarabia-WMF moved this task from Doing to Code Review on the Reader Growth Team (Sprint 5 (Nov 25 - Dec 9) Q2 25/26) board.Dec 4 2025, 6:57 PM

Thanks @KSarabia-WMF! For clarity, I was initially concerned about compatibility with grade A Safari and iOS Safari browsers. Based on the compatibility charts on MDN, position: sticky is unsupported in Safari < 13 and iOS Safari < 13, while scroll-margin-top is unsupported in Safari < 14.1 and iOS Safari < 14.5.

Tested this patch 1214750 locally, and confirmed that it ignores the linter rule and suppresses the "not supported by Chrome" warnings.

Running "stylelint:all" (stylelint) task
>> Linted 3 files without errors

I won't move this to sign-off yet because it's not clear if anything else needs to be done based on requirements/acceptance criteria. Anything else needed?

Change #1214750 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Adds ignore lines to suppress warnings

https://gerrit.wikimedia.org/r/1214750

ReleaseTaggerBot added a project: MW-1.46-notes (1.46.0-wmf.7; 2025-12-16).Dec 5 2025, 4:00 AM

Maintenance_bot removed a project: Patch-For-Review.Dec 5 2025, 4:30 AM

@lwatson I don't think anything else is needed.

lwatson moved this task from Code Review to Signoff on the Reader Growth Team (Sprint 5 (Nov 25 - Dec 9) Q2 25/26) board.Dec 5 2025, 8:12 PM

egardner closed this task as Resolved.Dec 8 2025, 6:42 PM

matthiasmullie added a project: ReaderExperiments-StickyHeaders.Jan 6 2026, 1:29 PM

Restricted Application edited projects, added Reader Growth Team; removed Reader Growth Team (Sprint 5 (Nov 25 - Dec 9) Q2 25/26). · View Herald TranscriptJan 6 2026, 1:29 PM

Aklapper edited projects, added Reader Growth Team (Sprint 5 (Nov 25 - Dec 9) Q2 25/26); removed Reader Growth Team.Jan 6 2026, 2:04 PM