Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Map not displayed at all when <html dir="rtl"> (regression!) #9329

Closed
yarinr opened this issue Feb 23, 2020 · 3 comments · Fixed by #9332
Closed

Map not displayed at all when <html dir="rtl"> (regression!) #9329

yarinr opened this issue Feb 23, 2020 · 3 comments · Fixed by #9332
Labels
bug 🐞 release blocker ⛔

Comments

@yarinr
Copy link

yarinr commented Feb 23, 2020 •
edited
Loading

mapbox-gl-js version: 1.7 (didn't happen in 1.0)

browser: Chrome 72

Steps to Trigger Behavior

  1. Place map container inside html element with dir="rtl", or any other element with dir="rtl" attribute
  2. Map won't even show up.
  3. (This has nothing to do with the RTL plugin and whether it's included or not)
  4. Workaround - wrap the map in div with dir="ltr" to make it work.

Note that this is a regression. It didn't happen in 1.0, and happens in 1.7 (I noticed it when upgrading my RTL app version of mapbox from 1.0 to 1.7)

Link to Demonstration

Go to any demo and wrap the map in html element with dir="rtl"

Expected Behavior

Map will be displayed

Actual Behavior

Map isn't displayed at all
@mourner
Copy link
Member

mourner commented Feb 24, 2020

Confirmed — thanks for the report! Regressed by #8227 — making a fix now.

@mourner mourner mentioned this issue Feb 24, 2020
Merged
4 tasks
@yarinr
Copy link
Author

yarinr commented Feb 24, 2020 •
edited
Loading

@mourner Thank you so much for your prompt response and fix! Looking forward to the next release!
Also, if I may ask, out of curiosity -- what steps did you take to locate the exact change that caused the issue?

@mourner
Copy link
Member

mourner commented Feb 24, 2020

@yarinr thank you! I had a hunch that this is a CSS-related bug, so I set up a simple test case with dir=rtl and started testing the same JS build against different versions of CSS, and found that v1.1.0 already has the bug. Next, I skimmed through the v1.1.0 changelog for any CSS-related pull requests, and immediately found the text-align: left one which seemed suspicious. Then I confirmed that this line triggers the bug.

@yen-tt yen-tt mentioned this issue Jul 29, 2021
Merged
yen-tt added a commit to yext/answers-hitchhiker-theme that referenced this issue Jul 30, 2021
@yen-tt
Map issues fixed for RTL locale/language (#901)
b031dba 
Fix Mapbox issues when using RTL styling and language

- Map not showing up in rtl format issue is from Mapbox only (Google works on all map pages) due to[ css issues](mapbox/mapbox-gl-js#9329) from their api. This is fixed in [v1.9.0](https://github.com/mapbox/mapbox-gl-js/blob/main/CHANGELOG.md#190). This pr updated the version to v1.13.1 only since they stop supporting ie11 in higher version.
- Use [MapBoxLanguage](https://github.com/mapbox/mapbox-gl-language) plugin to update language on displayed on map. Previously, map will display in english only.
- MapBox by default doesn't support RTL languages. Updated to use [mapbox-rtl-text](https://docs.mapbox.com/mapbox-gl-js/example/mapbox-gl-rtl-text/) plugin to resolve the issue.
- Update zoom control box position based on if it's ltr or rtl language
- Move rtl.js function to static/common folder since it's use in browser and in webpack

J=SLAP-1459
TEST=manual

Launched multilang test site
-  see that map appears in en, es, and ar for all map pages (locations, locations_google, locations_full_page_map, locations_full_page_map_with_filters) and providers (Google, Mapbox)
- see that the language displayed in the map matched with the given locale in url
- see that arabic is displayed property on map in rtl styling
- see that zoom control box is in top right for en and es, and is in top left for ar.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 🐞 release blocker ⛔
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix map not displaying inside RTL elements mapbox/mapbox-gl-js
2 participants
@mourner @yarinr