Bike mode triangle doesn't work

[buma]

Version is latest master.

If I plan transit trip I get correct trip with narrative. But if I switch "travel by" to bike only bike trip is shown and bike triangle looks like this:

This is in Chromium 43.0.2357.65 (64-bit)

And there is an error in JavaScript console: Invalid negative value for attribute width=-27 in raphael.min. Seems that something is wrong in SVG drawing of the triangle.

Bike triangle looked correctly some time ago.

In Firefox 38.0.1 it looks a little better. Q and F are in the correct places but right vertex of the triangle is missing.

[buma]

It seems there is a problem in triangle div width. Since width is specified in client.css as 75%. Height is 110px.

This means that width is read as 75 in Chromium and this makes barWidth negative. Which makes all the rectangles which shows Bike friendly, quick and fast with negative widths.

In previous versions div height was 100px and width was 340px. BarWidth was then positive and everything worked.

If I change width of triangle to 340px in css. I can see fully functional triangle in Firefox:

In Chrome bars are seen but are without labels until user clicks on triangle.

After the click they are functional but labels (Q, F and B) seems to be moved for 20 pixels down. So that Q is in the middle of the triangle and F and B are under it and are invisible.

There is a difference in generated SVG between Firefox and Chromium. Chromium has for each triangle label (Q, F, B) tspan element with dy != 0. In Firefox dy of tspan elements is 0. If I change those dy values in chrome developer tools. Triangle looks and works as it should.

In rectangle labels (Quick, Flat, Bike Friendly) it seems there is a same problem. When they are first rendered dy of tspan ranges from 22-66 and after click on a triangle they are all 5. Which moves them to the centre of their respective rectangle. In Firefox they are always 4.5.

EDIT: Seems known Raphael bug. Issue 620, 772, 491.

But why this works correctly in leaflet client which is also drawn with Raphael and old OTP.js?
Version of Raphael that is currently used is 2.1.2. It is the same version which was used in September test site which works correctly in the same browsers that this one has problems.
In leaflet OTP there is a version 2.1.1 which also works correctly.

[buma]

Thanks for fix.

In Chrome it looks as it should but in FF it looks like it was before in Chrome:
Bars are seen but are without labels until user clicks on triangle.

After the click they are functional but labels (Q, F and B) seems to be moved for 20 pixels down. So that Q is in the middle of the triangle and F and B are under it and are invisible.

Seems that now it is broken in Firefox.

[trevorgerhardt]

Bummer. Just refactored a lot. Make sure you check out the latest if you'd like to debug this and submit a change.

[trevorgerhardt]

Otherwise I'll take a look tomorrow.

[buma]

I tried to look into it but I don't even know why it didn't work at the first place since versions are the same as in OTP and previous version of otpjs where it does work.

It seems all you changed was width and this to self which fixed width (which makes sense) but result is completely reverse than when I changed width. FF doesn't work Chrome does. And it doesn't make sense to me at all.

[trevorgerhardt]

And it looks like it's broken again in Chrome sometimes? I'm going to motion to replace this with a simpler interface. Something that can be done with normal form elements and without Raphael.js.

[buma]

Bike triangle seems to work correctly in both FF and Chrome if it is downgraded to version 2.1.2. It was changed to 2.1.4 sometime.