The diagrams of 'carbon intensity', 'electricity origin' and 'electricity price' expand infinity to the right.

[yyxcv]

To Reproduce

1. open the website or app.
2. click on a country
3. scroll a bit down and look at the diagrams. They start 'compressed' on the left and then expand infinitely to the right.

Expected behavior
The diagrams shouldn't expand at all but fill the whole width of the screen.

Screenshots

Smartphone

• Device: iPhone 7XL
• OS: iOS 15.8.2
• Browser: Safari
• App-Version: 1.129.0

[VIKTORVAV99]

We are already looking into this but have so far been unable to replicate it on our test devices.

Do you have some additional information as to if any specific actions were made?
And does it always happen?

[yyxcv]

I could replicate the error on another iPhone 7 (iOS 15.8.2) on the web version of electricity map (I don't have the app installed there but assume the error would occur in it also).

There were no special actions required to trigger the error. I just opened the page and clicked on a country.

[yyxcv]

And yes, it always happens on my device(s) since the latest update, that introduced the names of the power sources in the 'energy consumption per source' diagram (see screenshot)

[VIKTORVAV99]

Thanks for the additional details!
I'll share them with the team!

[madsnedergaard]

This can be reproduced in the iOS simulator! It happens on iOS 15, but not on iOS 17:

Kapture.2024-05-14.at.22.11.43.mp4

[VIKTORVAV99]

This can be reproduced in the iOS simulator! It happens on iOS 15, but not on iOS 17:

Kapture.2024-05-14.at.22.11.43.mp4

Have you tested if it happens with the capacitor 6 update as well?

I'm thinking that if we are lucky it might fix the issue by itself. Otherwise I think we might have to look into the resize observer as that's the only thing I can think of that could cause this.

[madsnedergaard]

Have you tested if it happens with the capacitor 6 update as well?

I'm thinking that if we are lucky it might fix the issue by itself. Otherwise I think we might have to look into the resize observer as that's the only thing I can think of that could cause this.

Yeah, it still happens with the capacitor update :/

I can run it in dev-mode and look mode into what's happening later, just quickly wanted to share details on how to reproduce the bug

[VIKTORVAV99]

I'm suspecting this is the cause https://caniuse.com/mdn-api_resizeobserversize but we would have to verify and double check that.

[madsnedergaard]

Found the issue at last 😓
ZeeCoder/use-resize-observer#85 (comment)

In essence, the observer doesn't work on an SVG element for Safari 16 and below...

Solutions:

1. Using a polyfilled version: import useResizeObserver from "use-resize-observer/polyfilled" fixes the problem
2. Wrap each of the observed SVGs in a div and use that as a ref

Solution 1 is very easy, but it means we're polyfilling everywhere despite native support. We can however ensure we're always doing it the same way via an ESLint rule

Solution 2 is also fairly easy to do, but I don't see how we can make sure we don't get into this problem again 🤔 Any ideas on this?

[VIKTORVAV99]

Found the issue at last 😓

ZeeCoder/use-resize-observer#85 (comment)

In essence, the observer doesn't work on an SVG element for Safari 16 and below...

Solutions:

1. Using a polyfilled version: import useResizeObserver from "use-resize-observer/polyfilled" fixes the problem

2. Wrap each of the observed SVGs in a div and use that as a ref

Solution 1 is very easy, but it means we're polyfilling everywhere despite native support. We can however ensure we're always doing it the same way via an ESLint rule

Solution 2 is also fairly easy to do, but I don't see how we can make sure we don't get into this problem again 🤔 Any ideas on this?

I would prefer version two as polyfills are usually horrible for performance. I wonder if it would be possible to set up cypress on a Mac runner and test it with safari as well? Or is it just limited to iOS?

[madsnedergaard]

Found the issue at last 😓
ZeeCoder/use-resize-observer#85 (comment)
In essence, the observer doesn't work on an SVG element for Safari 16 and below...
Solutions:

1. Using a polyfilled version: import useResizeObserver from "use-resize-observer/polyfilled" fixes the problem
2. Wrap each of the observed SVGs in a div and use that as a ref

Solution 1 is very easy, but it means we're polyfilling everywhere despite native support. We can however ensure we're always doing it the same way via an ESLint rule
Solution 2 is also fairly easy to do, but I don't see how we can make sure we don't get into this problem again 🤔 Any ideas on this?

I would prefer version two as polyfills are usually horrible for performance. I wonder if it would be possible to set up cypress on a Mac runner and test it with safari as well? Or is it just limited to iOS?

I'll do solution 2 now to get it fixed, then we can discuss long-term plans afterwards :)

[madsnedergaard]

A solution could be to wrap the hook and make sure it doesn't allow SVGSVGElement, but I couldn't get it working. Do we have any TypeScript experts in the house? 😅

import { RefCallback, RefObject } from 'react';
import useResizeObserver, {
  ObservedSize,
  ResizeHandler,
  RoundingFunction,
} from 'use-resize-observer';

type ExcludeSVGElement<T> = T extends SVGSVGElement ? never : T;
type ResizableElement = ExcludeSVGElement<Element>;

type HookResponse<T extends ResizableElement> = {
  ref: RefCallback<T>;
} & ObservedSize;

function useResizeObserverExcludingSVGs<T extends ResizableElement>(
  opts: {
    ref?: RefObject<T> | T | null | undefined;
    onResize?: ResizeHandler;
    box?: ResizeObserverBoxOptions;
    round?: RoundingFunction;
  } = {}
): HookResponse<T> {
  return useResizeObserver(opts);
}

export default useResizeObserverExcludingSVGs;

[VIKTORVAV99]

A solution could be to wrap the hook and make sure it doesn't allow SVGSVGElement, but I couldn't get it working. Do we have any TypeScript experts in the house? 😅

import { RefCallback, RefObject } from 'react';
import useResizeObserver, {
  ObservedSize,
  ResizeHandler,
  RoundingFunction,
} from 'use-resize-observer';

type ExcludeSVGElement<T> = T extends SVGSVGElement ? never : T;
type ResizableElement = ExcludeSVGElement<Element>;

type HookResponse<T extends ResizableElement> = {
  ref: RefCallback<T>;
} & ObservedSize;

function useResizeObserverExcludingSVGs<T extends ResizableElement>(
  opts: {
    ref?: RefObject<T> | T | null | undefined;
    onResize?: ResizeHandler;
    box?: ResizeObserverBoxOptions;
    round?: RoundingFunction;
  } = {}
): HookResponse<T> {
  return useResizeObserver(opts);
}

export default useResizeObserverExcludingSVGs;

Instead of using it in the typescript type system can't we check the type of the object directly at runtime? Kind of like:

if(typeof element === HTMLElement): {"do the thingy"}
else: { "Nope!" }

Although maybe that will violate the rules of react?

[madsnedergaard]

I just realised we cannot just easily wrap everything in <div>s, as the TimeAxis is a SVG rendered inside a SVG 😬
I'll patch that with the polyfill for now to get this bug out of the way ASAP

[VIKTORVAV99]

I just realised we cannot just easily wrap everything in <div>s, as the TimeAxis is a SVG rendered inside a SVG 😬 I'll patch that with the polyfill for now to get this bug out of the way ASAP

Otherwise we could just revert the PR that we added the resize observer in. It was working decently enough before then we can come up with better solutions.