visgl / visgl/deck.gl

[Bug] CollisionFilterExtension wrongly hiding labels after rotating Android device from portrait to landscape or vise versa

Open
#7,889 0 comments 0 reactions 1 assignee View on GitHub

@felixpalmer is already working on this.

Since May 15, 2023.

bug
Dominant language
TypeScript
Stars
14.6k
Forks
2.3k
Avg merge
2d 9h
Merged PRs (30d)
42

Description

Description

CollisionFilterExtension begins to wrongly hide labels on Android mobile devices on certain browsers after the device view is rotated from portrait to landscape (or vise versa). Initially, before the device view is rotated, the CollisionFilterExtension works properly (no matter between the initial orientation being portrait or landscape). However, after the device viewport is rotated, the labels start to disappear wrongly. It seems that the collision map is not properly resized on certain Android browsers for some reason.

deck-gl-collisionfilterextension-label-hide-bug-after-device-viewport-rotation

This bug is visible and reproducible on the deck.gl website's own example https://deck.gl/examples/collision-filter-extension and I have reproduced it also on my own project even with the latest deck.gl@8.9.15. For demonstration see the attached gif where the labels are hidden properly initially when the device is in portrait mode but after rotating to landscape viewport the labels are hidden/shown wrongly.

The affected Android browsers I have tested are:

  • Firefox 113.0
  • Samsung Internet 20.0.7.1
  • Opera 75.1.3978.72329
  • Vivaldi Browser 6.0.2980.33
  • Brave 1.51.114

Note: Chrome browser on Android seems to be unaffected of this bug (which is interesting because other Chromium based browsers listed above are affected of the bug).

Note also: The bug does not seem to occur on iOS devices (I tested the example above and my own project to work fine on iOS Safari when rotating the viewport from portrait to landscape or vise versa).

Final note: This bug can also be reproduced with the mentioned Android browsers not just by rotating the device viewport but also when using deck.gl with react-map-gl and making the map full screen using the FullScreenControl. After toggling on the full screen mode the CollisionFilterExtension is similarly wrongly hiding the labels.

Flavors
  • Script tag
  • React
  • Python/Jupyter notebook
  • MapboxOverlay
  • GoogleMapsOverlay
  • CartoLayer
  • ArcGIS
Expected Behavior

CollisionFilterExtension should work properly also on mentioned Android mobile browsers after rotating the device view from portait to landscape (or vise versa) and hide / display labels based on the current device orientation.

Steps to Reproduce
  1. Open the example https://deck.gl/examples/collision-filter-extension on Android device with one of the affected browsers. You can do this step with device view orientation initially being either portrait or landscape.
  2. Move the view and see that the labels are correctly being hidden and shown by the CollisionFilterExtension.
  3. Rotate device view to the opposite rotation (i.e., portrait to landscape / landscape to portrait depending on the initial view).
  4. Move the view now and see that most of the labels are being incorrectly being hidden and you may only see random glimpses of the labels when moving the view around.
Environment
  • Framework version: deck.gl@8.9.0 and also the latest deck.gl@8.9.15 is affected
  • OS: Android 13
  • Android browsers tested to be affected to the bug:
    • Firefox 113.0
    • Samsung Internet 20.0.7.1
    • Opera 75.1.3978.72329
    • Vivaldi Browser 6.0.2980.33
    • Brave 1.51.114
Logs

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.