Firefox renders annotation bounding boxes incorrectly

[thatbudakguy]

Firefox (62.0b2) will, on some (but not all) page loads, render the annotation bounding boxes in the wrong location. The CSS applied to the boxes has the wrong values, so this seems like a JS or template problem (not SCSS).

Pics for comparison: Firefox top, Chrome (67.0) bottom

[thatbudakguy]

Not sure why, but changing the image itself to:

display: inline-block;

partially resolved this. There's some potentially relevant discussion on this stackoverflow post.

Annotation boxes are still a little above where they should be, but the image height and width are now being calculated correctly.

[thatbudakguy]

It looks like there's a race condition on loading the image - sometimes, the height is calculated correctly, but other times it's about 30px less than it should be.

I think there's an inconsistency between FF and chrome regarding prefetching of srcset attributes; if I pause JS execution before the zones are drawn I can see that the page image itself has already rendered on FF but not on Chrome.

Not sure what else to do so I'm going to call it "good enough"; the zones are now 30px away from their targets in the worst case.

[rlskoeser]

Wow, that's some good sleuthing on this one. It is definitely working much better than the previous implementation.

I just looked at the template and saw the calculations that are being done - I would have expected the layout to be done with the existing percentages, I'm pretty sure that's how I implemented it in readux. I'd like to take a look at this one and see if we can't convert to percentages for the annotation zones

[thatbudakguy]

These look identical in chrome and FF now. Nice!