Skip to content

WDFN-967 - Fixed display issues on Safari with the time series graphs

Bucknell, Mary S. requested to merge mbucknell/waterdataui:safari_issue into main

Before making a pull request

  • Put the appropriate EXEMPT flag if needed in the MR label (see https://practices.wma.chs.usgs.gov/practice/peer_code_review/)
  • Run all linters (make lint)
  • Run all tests (make test)
  • Update the changelog appropriately
  • If making a release, update code.json metadataLastUpdated and bump CHANGELOG.md to next version.

Description

After investigating the problem and comparing with the code on production which was still working on Safari, I determined that the issue appeared to have been introduced when we changed the way we were centering the loading indicator, watermark, and no data overlay. The issue affected all time series graphs (the DV statistics graph and the multi site hydrograph).

I removed the use of flex for the container of the SVG. This eliminated the need to set the height of this div as well. Instead used flex within the overlay containers to center vertically and then set margin:auto to center the horizontal on the container within the outer container. There were a few other tweaks that had to be made.

I checked all use of the TimeSeriesGraph component and the LoadingIndicator component as styling changes and markup changes needed to be made to those components all usages on all pages appear to work as expected now on Chrome and Safari browsers and on different browser widths. Also checked to make sure the footer was not covering any page content on pages with time series graphs.

After making a pull request

  • If appropriate, put the link to the PR in the JIRA ticket
  • Assign someone to review unless the change is trivial
  • Check the accessibility CI step and fix or explain any issues.

Merge request reports