rocs.hu-berlin.de - Location abbreviation text overlapp each other

[softvision-oana-arbuzov]

URL: http://rocs.hu-berlin.de/corona/docs/model/visual_analytics/

Browser / Version: Firefox Preview Nightly 200408 (🦎 77.0a1-20200407093520)
Operating System: Samsung Galaxy S6 Edge (Android 7.0) - 1440 x 2560 pixels (~577 ppi pixel density)
Tested Another Browser: Yes Chrome

Problem type: Design is broken
Description: Items are overlapped
Steps to Reproduce:

1. Navigate to http://rocs.hu-berlin.de/corona/docs/model/visual_analytics/
2. Scroll down the page to the first graphic.
3. Observe location abbreviation text the graphic.

Expected Behavior:
The text has a fair size, thus no locations are overlapped.

Actual Behavior:
The text is displayed too large, thus overlapping the locations.

Notes:

1. Screenshot attached.
2. The issue is not reproducible on Chrome 80.0.3987.162.

Watchers:
@softvision-oana-arbuzov
@softvision-sergiulogigan
@cipriansv

View the screenshot

Browser Configuration

• None

From webcompat.com with ❤️

[miketaylr]

Firefox:

<g class="button" transform="translate(30,540)">
  <circle r="10" style="stroke: black; fill: darkred;"></circle>
  <text transform="translate(0,30)" style="text-anchor: middle">CAN</text>
</g>

Chrome:

<g class="button" transform="translate(30,540)">
  <circle r="10" style="stroke: black; fill: darkred;"></circle>
  <text transform="translate(0,30)" style="text-anchor: middle; font-size: 10px;">CAN</text>
</g>

Note the missing font-size: 10px; in Firefox. 🤔

[miketaylr]

http://rocs.hu-berlin.de/corona/interactives/event_horizon/eh_sg.js

buttons.append("text").text(function(d){return d.root}).style("text-anchor","middle")
	.attr("transform","translate(0,30)").style("font-size",10)

Guessing that if it was "10px" vs 10 this would work.

[miketaylr]

Here's where d3.js's style is defined:

https://github.com/d3/d3-selection/blob/v1.4.1/src/selection/style.js#L19

It seems that Blink and WebKit are happy to accept a unitless value for CSSStyleDeclaration.setProperty: https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleDeclaration/setProperty

[miketaylr]

When a number is passed as the value, jQuery will convert it to a string and add px to the end of that string. If the property requires units other than px, convert the value to a string and add the appropriate units before calling the method.

It seems like jQuery tried to pre-empt this difference, maybe.

[miketaylr]

I'm guessing Firefox bails at step 6 of https://drafts.csswg.org/cssom/#dom-cssstyledeclaration-setproperty

If component value list is null, then return.

[miketaylr]

I can't find any existing Bugzilla core bugs for this, but we should probably try outreach here -- the site is doing the wrong thing per-spec. They should just use "10px" instead of 10 and it will work for all browsers.

[miketaylr]

I sent an email to the contact noted on the page.

[softvision-oana-arbuzov]

I think a similar issues occurs on Desktop page.

URL: http://rocs.hu-berlin.de/corona/

Firefox:

<text transform="translate(445,9.431137724550897)" style="text-anchor: end; font-weight: bold; fill: darkred;">74877</text>

Chrome:

<text transform="translate(445,9.431137724550897)" style="text-anchor: end; font-weight: bold; fill: darkred; font-size: 10px;">74877</text>

Tested with:
Browser / Version: Firefox Nightly 77.0a1 (2020-04-15)
Operating System: Windows 10 Pro

[softvision-oana-arbuzov]

Here also:
URL: http://rocs.hu-berlin.de/corona/docs/forecast/results_by_country/

Firefox:

<rect class="buttonbackground" style="fill: white;" x="-2" y="-17.350939750671387" width="69.67643737792969" height="23.188674926757812" rx="1" ry="1"></rect>

Chrome:

<rect class="buttonbackground" x="-2.78125" y="-11.21875" width="61.8125" height="15.53125" rx="1" ry="1" style="fill: white;"></rect>