Mapbox-gl-js: Map not displayed at all when <html dir="rtl"> (regression!)

Created on 23 Feb 2020 · 3Comments · Source: mapbox/mapbox-gl-js

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

browser: Chrome 72

Steps to Trigger Behavior

Place map container inside html element with dir="rtl", or any other element with dir="rtl" attribute
Map won't even show up.
(This has nothing to do with the RTL plugin and whether it's included or not)
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

bug release blocker

Source

yarinr

All 3 comments

Confirmed — thanks for the report! Regressed by https://github.com/mapbox/mapbox-gl-js/pull/8227 — making a fix now.

mourner on 24 Feb 2020

🎉1

@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?

yarinr on 24 Feb 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.

mourner on 24 Feb 2020

👍1

Was this page helpful?

0 / 5 - 0 ratings