Full-screen not working on mobile
Closed, ResolvedPublic1 Estimated Story PointsBUG REPORT
Actions

Assigned To

Authored By

	matthiasmullie
	Sep 16 2025, 1:21 PM

Project Tags

Referenced Files

	F66553190: ScreenRecording_09-24-202515-37-47_1-ezgif.com-optimize.gif
	Sep 24 2025, 10:46 PM

	F66553185: ScreenRecording_09-24-202515-34-26_1-ezgif.com-optimize.gif
	Sep 24 2025, 10:46 PM

	F66026000: Fullscreen_Chrome_mobile_480.mov
	Sep 16 2025, 1:21 PM

Subscribers

Description

Reported on Slack by @lwatson & @bvibber:

Firefox: fullscreen works in desktop and mobile views for both small and large devices.

Chrome: I attached a video of what happens when you select full screen using mobile view on mobile device. The controls, captions, VTOC is all lost.

Safari: I tested this on my iPhone and pressing the button doesn't trigger anything.

Fullscreen_Chrome_mobile_480.mov1 MBDownload

iirc native web fullscreen on ios is ipad only
so for iphones you have to emulate it in css, it's silly

Acceptance criteria

Clicking the <fullscreen> button in iOS actually opens the image full-screen

Requirement

Scope: Mobile web (iOS Safari and iOS Chrome).

Tapping the fullscreen button on iOS must open the image in fullscreen.
Since native fullscreen API is not supported on iPhone Safari, emulate fullscreen with CSS.
A clear exit control must be present so users can leave fullscreen (no reliance on Escape key).
Controls, captions, and VTOC must remain visible while in fullscreen.

BDD

Feature: Fullscreen functionality on iOS

  Scenario: Fullscreen on iOS Safari
    Given I am viewing an image in mobile view on iPhone Safari
    When I tap the fullscreen button
    Then the image is displayed fullscreen via CSS emulation
    And controls, captions, and VTOC remain visible
    And an exit control is available to close fullscreen

  Scenario: Fullscreen on iOS Chrome
    Given I am viewing an image in mobile view on iPhone Chrome
    When I tap the fullscreen button
    Then the image is displayed fullscreen via CSS emulation
    And controls, captions, and VTOC remain visible
    And an exit control is available to close fullscreen

Test Steps

Test Case 1: iOS Safari fullscreen

Open an image in mobile view on iPhone Safari.
Tap the fullscreen button.
AC1: Image expands to fullscreen using CSS emulation.
AC2: Controls, captions, and VTOC remain visible in fullscreen.
AC3: An exit control (e.g., close button) is visible and functional.

Test Case 2: iOS Chrome fullscreen

Open an image in mobile view on iPhone Chrome.
Tap the fullscreen button.
AC4: Image expands to fullscreen using CSS emulation.
AC5: Controls, captions, and VTOC remain visible in fullscreen.
AC6: An exit control (e.g., close button) is visible and functional.

QA Results - Patchdemo

AC	Status	Details
1	✅	T404719#11212345
2	✅	T404719#11212345
3	✅	T404719#11212345
4	✅	T404719#11212345
5	✅	T404719#11212345
6	✅	T404719#11212345

Details

Related Changes in Gerrit:

	Subject	Author	Repo	Branch	Lines +/-
	Replace fullscreen toggle behaviour	Matthias Mullie	mediawiki/extensions/ReaderExperiments	master	+47 -26

Customize query in gerrit

Event Timeline

matthiasmullie created this task.Sep 16 2025, 1:21 PM

Herald added a subscriber: Aklapper. · View Herald TranscriptSep 16 2025, 1:21 PM

@JScherer-WMF I noticed the fullscreen button isn't working on iOS Safari and Chrome, which got me thinking about the mobile user experience.
While desktop users can easily exit fullscreen mode using the escape key, mobile/tablet users might struggle to exit fullscreen mode, potentially creating a frustrating experience. However, I could be missing something.

Is fullscreen functionality necessary on mobile devices? (If yes, then let's investigate and fix it. If not, then we can optionally disable this feature on mobile entirely.)

In T404719#11185532, @lwatson wrote:

@JScherer-WMF I noticed the fullscreen button isn't working on iOS Safari and Chrome, which got me thinking about the mobile user experience.
While desktop users can easily exit fullscreen mode using the escape key, mobile/tablet users might struggle to exit fullscreen mode, potentially creating a frustrating experience. However, I could be missing something.

Is fullscreen functionality necessary on mobile devices? (If yes, then let's investigate and fix it. If not, then we can optionally disable this feature on mobile entirely.)

Full screen, including a way to get out of it, definitely required in mobile experiences. This is especially important given all the wild cropping we're doing.

Note that fullscreen won't help with seeing area outside the cropping at all. If we want to show that area we have to actually show it, not just crop.

ovasileva moved this task from Incoming/Inbox to Needs Refinement on the Reader Growth Team board.Sep 16 2025, 4:53 PM

ovasileva triaged this task as High priority.Sep 16 2025, 4:58 PM

Can we just make the fullscreen button toggle object-fit instead? It loads cropped (object-fit: cover) + caption, but toggles to uncropped (object-fit: contain) without caption? That’s essentially only adding a class to the container & 2 lines of CSS, and keeps controls simple and consistent (i.e. buttons remain and easy to go back to cropped mode)

matthiasmullie claimed this task.Sep 17 2025, 5:00 PM

Change #1189498 had a related patch set uploaded (by Matthias Mullie; author: Matthias Mullie):

[mediawiki/extensions/ReaderExperiments@master] Replace fullscreen toggle behaviour

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

gerritbot added a project: Patch-For-Review.Sep 18 2025, 2:10 PM

matthiasmullie edited projects, added: Reader Growth Team (Sprint 6); removed: Reader Growth Team.Sep 18 2025, 2:12 PM

matthiasmullie moved this task from Committed to Doing on the Reader Growth Team (Sprint 6) board.

Test wiki created on Patch demo by Mmullie (WMF) using patch(es) linked to this task:
https://4c7a526edd.catalyst.wmcloud.org/w/

Note: above patch is technically ready, but is awaiting design input on the demo.
Discussion ongoing on Slack so I'll keep this in "doing" for now - I'll update/move this ticket based depending on the outcome.

Approved; ready for CR

Change #1189498 merged by jenkins-bot:

[mediawiki/extensions/ReaderExperiments@master] Replace fullscreen toggle behaviour

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

This patchdemo instance can be used for QA:

https://30eaa87caa.catalyst.wmcloud.org/wiki/Paris

Note that we've also added a tooltip on this button (which will appear to the left).

egardner moved this task from Code Review to QA on the Reader Growth Team (Sprint 6) board.Sep 19 2025, 7:25 PM

Maintenance_bot removed a project: Patch-For-Review.Sep 19 2025, 7:30 PM

HSwan-WMF set the point value for this task to 1.Sep 24 2025, 4:27 PM

Test Result - Patchdemo

Status: ✅ PASS
Environment: Patchdemo (https://30eaa87caa.catalyst.wmcloud.org/wiki/Paris)
OS: iOS 18.0
Browser: Safari / Chrome (latest as of test date)
Device: iPhone 14 Pro
Emulated Device: NA

Test Case 1: iOS Safari fullscreen

Open an image in mobile view on iPhone Safari.
Tap the fullscreen button.
✅ AC1: Image expands to fullscreen using CSS emulation.
✅ AC2: Controls, captions, and VTOC remain visible in fullscreen.
✅ AC3: An exit control (e.g., close button) is visible and functional.

ScreenRecording_09-24-202515-34-26_1-ezgif.com-optimize.gif (400×869 px, 3 MB)

Test Case 2: iOS Chrome fullscreen

Open an image in mobile view on iPhone Chrome.
Tap the fullscreen button.
✅ AC4: Image expands to fullscreen using CSS emulation.
✅ AC5: Controls, captions, and VTOC remain visible in fullscreen.
✅ AC6: An exit control (e.g., close button) is visible and functional.

ScreenRecording_09-24-202515-37-47_1-ezgif.com-optimize.gif (400×869 px, 2 MB)

Edtadros updated the task description. (Show Details)Sep 24 2025, 10:47 PM

Edtadros updated the task description. (Show Details)

ovasileva claimed this task.Sep 29 2025, 4:10 PM

ovasileva closed this task as Resolved.Sep 30 2025, 1:11 PM