Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

V2. Displacement of elements bug on Safari

See original GitHub issue

Expected Behavior

Button should be clickable on the button

Actual Behavior

Button is not clickable on the button (but on displaced location)

URL, screen shot, or Codepen exhibiting the issue

play around in different screen resolution v2.grommet.io/play

/**
* Welcome to the Grommet playground!
* This is the hello world example. There are more examples available
* in the top right header, so feel free to explore all of it.
* Grommet components can be accessed by their direct name, e.g.:
* Box, Button, ...
* Icons are available inside Icons variable: Icons.Add, for example.
*
* About this hello world example:
*
* It simulates a form (no real action). It adds a Header, Body, and Footer.
* The body scrolls independently. Header and Footer are sticky.
* See overflow='auto' in the Box for the Body component.
*
* Don't forget to checkout the Theme playground, where we demonstrate how to
* customize the Grommet theme to match your brand.
*
* Have fun :)
**/

const ConfirmationLayer = ({ onClose }) => (
  <Layer position='center' onClickOutside={onClose}>
    <Box pad='large' gap='medium'>
      <Text>Are you sure?</Text>
      <Box direction='row' gap='medium' align='center'>
        <Button label='Yes' onClick={onClose} />
        <Button label='No' primary={true} onClick={onClose} />
      </Box>
      <Box direction='row' gap='medium' align='center'>
        <Button label='Yes' onClick={onClose} />
        <Button label='No' primary={true} onClick={onClose} />
      </Box>
      <Box direction='row' gap='medium' align='center'>
        <Button label='Yes' onClick={onClose} />
        <Button label='No' primary={true} onClick={onClose} />
      </Box>
      <Box direction='row' gap='medium' align='center'>
        <Button label='Yes' onClick={onClose} />
        <Button label='No' primary={true} onClick={onClose} />
      </Box>
      <Box direction='row' gap='medium' align='center'>
        <Button label='Yes' onClick={onClose} />
        <Button label='No' primary={true} onClick={onClose} />
      </Box>
      <Box direction='row' gap='medium' align='center'>
        <Button label='Yes' onClick={onClose} />
        <Button label='No' primary={true} onClick={onClose} />
      </Box>
    </Box>
  </Layer>
);

class Body extends React.Component {
  constructor() {
    this.state = {}
  }
  render () {
    const { layerType } = this.state;
    let layer;
    if (layerType === 'Confirmation') {
      layer = <ConfirmationLayer onClose={() => this.setState({ layerType: undefined })} />;
    }

    return (
      <Box flex={true} pad='medium' overflow='auto'>
        <Box margin='small'>
          <Button
            label={'Confirmation'}
            onClick={() => this.setState({
              layerType: (layerType === 'Confirmation' ? undefined : 'Confirmation'),
            })}
          />
        </Box>
        {layer}
      </Box>
    );
  }
}

const App = () => (
  <Grommet theme={Themes.grommet} full={true}>
    <Box fill={true}>
      <Body />
    </Box>
  </Grommet>
);

render(<App />);