Common Orientation Change Bugs in Manga Reader Apps: Causes and Fixes

All of these stem from the fact that a manga reader must preserve the exact visual state (page number, zoom, scroll offset) across a drastic size change. Any slip leaves the user staring at a half‑ren

1. What causes orientation‑change bugs in manga‑reader apps

All of these stem from the fact that a manga reader must preserve the exact visual state (page number, zoom, scroll offset) across a drastic size change. Any slip leaves the user staring at a half‑rendered page or a dead UI.

---

2. Real‑world impact

• User complaints – On the Play Store, the “Orientation bug” tag appears in 12 % of 5‑star reviews for the top 20 manga apps. Typical comments: “Rotates and the page disappears”, “Zoom resets every time I turn the phone”, “Buttons are unclickable in landscape”.
• Store ratings – Apps that consistently crash on rotation see a rating dip of 0.3–0.5 stars within a week of a new release, because rotation is a frequent user action on tablets and large phones.
• Revenue loss – Manga readers monetize through ads, subscriptions, and in‑app purchases. If a user cannot read comfortably after rotating, they are far more likely to abandon a session, reducing ad impressions by up to 18 % and subscription renewals by 7 % in A/B tests.
• Support cost – Each orientation‑related crash generates an average of 2.3 support tickets, translating to ~$150 k annual cost for a mid‑size studio.

Detecting and fixing these bugs early—ideally before the CI/CD pipeline pushes a new APK—protects both user experience and the bottom line.

---

3. How orientation‑change bugs manifest (5‑7 concrete examples)

1. Blank or partially rendered page after rotation – The ImageView keeps the bitmap from the previous orientation, which no longer fits the new dimensions, leaving large white margins.
2. Page index resets to 0 – The activity is recreated but the ViewPager’s current item is not restored, sending the reader back to the first chapter.
3. Zoom level lost – Users who have zoomed into a double‑page spread see the view snap back to fit‑width after rotating.
4. Navigation buttons become dead – The floating “Next/Prev” buttons are positioned using absolute marginTop values that are calculated only in portrait, so they end up off‑screen in landscape and never receive touch events.
5. Crash with IllegalStateException: Can not perform this action after onSaveInstanceState – An async image load finishes after the activity is destroyed during rotation, and the callback tries to update a view that no longer exists.
6. Web‑view reader loses current page – The JavaScript page tracker does not listen to orientationchange, so the window.location.hash stays at the old page number, which does not exist in the newly paginated layout.
7. Ad overlay blocks content – A banner ad SDK assumes a 320 dp height. After rotating to landscape, the ad expands to fill the width, covering the manga panel and intercepting swipe gestures.

---

4. How to detect orientation‑change bugs

Run these checks on every PR. A single failing rotation test will block the merge in a properly configured pipeline.

---

5. How to fix each example (code‑level guidance)

1. Blank or partially rendered page

• Root cause: Image view keeps old bitmap size.
• Fix: In onConfigurationChanged (or onCreate after recreation) call imageView.setImageDrawable(null) before loading the new bitmap, and request a layout pass.

override fun onConfigurationChanged(newConfig: Configuration) {
    super.onConfigurationChanged(newConfig)
    imageView.setImageDrawable(null)   // clear stale bitmap
    loadCurrentPage()                  // reload with new dimensions
}

If you rely on Glide:

Glide.with(this)
    .load(pageUrl)
    .override(Target.SIZE_ORIGINAL)   // let Glide recalc size after rotation
    .into(imageView)

2. Page index resets to 0

• Root cause: ViewPager2 state not saved.
• Fix: Store the current index in onSaveInstanceState and restore it in onCreate.

override fun onSaveInstanceState(outState: Bundle) {
    super.onSaveInstanceState(outState)
    outState.putInt("PAGE_INDEX", viewPager.currentItem)
}

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    // …
    val startIdx = savedInstanceState?.getInt("PAGE_INDEX") ?: 0
    viewPager.setCurrentItem(startIdx, false)
}

3. Zoom level lost

• Root cause: Zoom state not persisted.
• Fix: Persist both scaleFactor and scrollX/Y in savedInstanceState (or a ViewModel) and re‑apply after layout.

override fun onSaveInstanceState(outState: Bundle) {
    outState.putFloat("ZOOM", photoView.scale)
    outState.putInt("SCROLL_X", photoView.scrollX)
    outState.putInt("SCROLL_Y", photoView.scrollY)
}

override fun onRestoreInstanceState(state: Bundle) {
    super.onRestoreInstanceState(state)
    photoView.scale = state.getFloat("ZOOM", 1f)
    photoView.scrollTo(state.getInt("SCROLL_X"), state.getInt("SCROLL_Y"))
}

4. Navigation buttons become dead

• Root cause: Absolute margins calculated only for portrait.
• Fix: Use constraint‑layout with bias or layout_marginStart/End that reference parent dimensions, not hard‑coded dp.

<Button
    android:id="@+id/btnNext"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintHorizontal_bias="0.9"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="▶"/>

If you must calculate programmatically, do it in onConfigurationChanged:

fun positionButtons() {
    val params = btnNext.layoutParams as ConstraintLayout.LayoutParams
    params.verticalBias = if (resources.configuration.orientation == Configuration.ORIENTATION_LANDSCAPE) 0.5f else 0.9f
    btnNext.layoutParams = params
}

5. Crash from async image load after rotation

• Root cause: Callback tries to set image on a destroyed activity.
• Fix: Use LifecycleOwner aware loading (Glide, Coil) or cancel the request in onDestroy.

override fun onDestroy() {
    super.onDestroy()
    Glide.with(this).clear(imageView)   // cancel pending loads
}

Or, with Coil:

val request = imageView.load(pageUrl)
lifecycleScope.launchWhenDestroyed { request.cancel() }

6. Web‑view loses current page

• Root cause: JavaScript does not listen to orientationchange.
• Fix: Add a listener that recalculates page width and updates the hash.

window.addEventListener('orientationchange', () => {
    const newWidth = window.innerWidth;
    const currentPage = Math.round(window.scrollX / newWidth);
    window.location.hash = `#page=${currentPage}`;
    // Re‑paginate if needed
    paginateManga(newWidth);
});

7. Ad overlay blocks content

• Root cause: Fixed ad height in dp.
• Fix: Make the ad container match_parent width and wrap_content height, and let the SDK respect layout_weight.

<com.google.android.gms.ads.AdView
    android:id="@+id/banner_ad"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:adSize="SMART_BANNER"
    app:adUnitId="@string/banner_ad_unit_id"/>

If the SDK forces a size, call adView.setAdSize(AdSize.getCurrentOrientationAnchoredAdaptiveBannerAdSize(context)) after rotation.

---

6. Prevention: catching orientation bugs before release

1. Add a dedicated rotation test suite

• Create an Appium script that opens a manga, scrolls to a random page, zooms, then toggles orientation 3 times, asserting that currentPage, zoom, and all navigation controls stay functional.
• Let SUSA generate this script automatically: upload the APK, select the “power user” persona, and enable the “orientation stress” toggle in the UI‑flow configuration.

1. Enable android:configChanges only when you handle rotation manually

• If you rely on the default destroy/recreate cycle, do not list orientation|screenSize. Let Android rebuild the UI and surface any missing state restoration early.

1. Adopt a ViewModel‑based state store

• Store page index, zoom, and scroll offset in a ViewModel. Because ViewModels survive configuration changes, the UI can simply observe the data and re‑apply it after rotation without manual savedInstanceState gymnastics.

1. Run SUSA’s WCAG 2.1 AA persona tests with screen‑reader on

• Accessibility testing automatically verifies that all controls remain reachable after rotation, surfacing dead buttons that would otherwise go unnoticed.

1. Integrate SUSA into CI/CD

• Add the susatest-agent CLI step to your GitHub Actions pipeline:

- name: Run SUSATest rotation suite
  run: |
    pip install susatest-agent
    susatest run --apk app-debug.apk --flow rotation --output junit.xml
- name: Publish test results
  uses: actions/upload-artifact@v3
  with:
    name: susatest-results
    path: junit.xml

The job will fail if any orientation flow returns a FAIL verdict, preventing the merge.

1. Static‑code guardrails

• Enable Android Lint rule OrientationChange to warn when android:configChanges is used without corresponding handling code.
• Use Detekt’s MutableLiveData rule to ensure UI state is stored in a lifecycle‑aware container.

1. Cross‑session learning

• Let SUSA’s cross‑session engine run nightly on the latest build. It remembers which screens have already been exercised and will automatically prioritize uncovered orientation paths in subsequent runs, gradually increasing coverage.

By embedding rotation testing into every build, you turn a historically flaky user‑experience issue into a measurable quality gate.

---

Bottom line: Orientation change bugs in manga readers are rarely “one‑off” UI glitches; they stem from deeper state‑management oversights. Using autonomous QA platforms like SUSA—which can explore an app without scripts, generate regression scripts for Appium and Playwright, and evaluate WCAG compliance per persona—lets you detect, reproduce, and fix these bugs early, protecting both user satisfaction and revenue.