robtaussig:https://robtaussig.com

There's a lot going on and I tried to reproduce in a forked repo, but the bug only manifests in my deployed app when changing routes twice. But given how I resolved it, I believe the bug originates from tamagui (or my understanding of how styled components work is incorrect).

Another relevant fact is that the bug only exists in the production build and only affects the web version. It affects all browsers that I tested (Safari, Chrome, Firefox).

Happy to give more details, but in its simplest form, I had a component that looks like:

const TOP_NAV_HEIGHT = 100;

const TopNav = styled(XStack, {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bc: 'black',
  height: TOP_NAV_HEIGHT,
  alignItems: 'flex-end',
  justifyContent: 'flex-end',
  display: 'flex',
  paddingBottom: 10,
  px: 20,
  animation: 'lazy',
  zIndex: 300_000,
});

Which I render it in the following context:

return (
    <YStack>
        <TopNav
            key={`top-nav`}
            opacity={isScrollingDown ? 1 : 0}
            y={isScrollingDown ? 0 : -TOP_NAV_HEIGHT}
        >
            <H2>SomeText</H2>
        </TopNav>
        <ScrollView
            space={'$4'}
            scrollEventThrottle={100}
            paddingTop={TOP_NAV_HEIGHT}
            onScroll={(e) => {
                 //Determine if scrolling down to trigger display/hiding of top nav
            }}
        >
          //Arbitrary Content
        </ScrollView>
       <XGroup>
           //Links to various pages with the same layout that differ only in the content displayed inside the ScrollView
       </XGroup>
    </YStack>
);

The problem is that when I navigate to on one of the links inside the XGroup twice, the TopNav element loses most, but not all, of its properties (most importantly the absolute positioning). This causes a layout shift now that it occupies space on the page.

The reason I figure this is related to tamagui is because the fix is to replace TopNav with an XStack and inlining all of the properties that were passed into the styled version:

return (
    <YStack>
        <XStack
            key={`${pageTitle}-top-nav`}
            opacity={isScrollingDown ? 1 : 0}
            y={isScrollingDown ? 0 : -TOP_NAV_HEIGHT}
            position={'absolute'}
            top={0}
            left={0}
            right={0}
            bc={'black'}
            height={TOP_NAV_HEIGHT}
            alignItems={'flex-end'}
            justifyContent={'flex-end'}
            display={'flex'}
            paddingBottom={10}
            px={20}
            animation={'lazy'}
            zIndex={300_000}
        >
            <H2>SomeText</H2>
        </XStack>
        <ScrollView
            space={'$4'}
            scrollEventThrottle={100}
            paddingTop={TOP_NAV_HEIGHT}
            onScroll={(e) => {
                 //Determine if scrolling down to trigger display/hiding of top nav
            }}
        >
          //Arbitrary Content
        </ScrollView>
       <XGroup>
           //Links to various pages with the same layout that differ only in the content displayed inside the ScrollView
       </XGroup>
    </YStack>
);

The above works fine in all environments and compilation targets, though from what I think I understand, it should be exactly the same as the styled TopNav component (just built in a less reusable way).

Created at 1 week ago

issue comment

tamagui/tamagui

[bug] styled component behaves differently in deployed production app

@natew Strangely enough, I can't reproduce anymore (even after checking out the exact commits in which I observed this behavior). I wonder if I had old dependencies that I just needed to yarn install? Anyway, apologies for the false report.

Created at 1 week ago

opened issue

tamagui/tamagui

[bug] styled component behaves differently in deployed production app

Another relevant fact is that the bug only exists in the production build and only affects the web version. It affects all browsers that I tested (Safari, Chrome, Firefox).

Happy to give more details, but in its simplest form, I had a component that looks like:

const TOP_NAV_HEIGHT = 100;

const TopNav = styled(XStack, {
  position: 'absolute',
  top: 0,
  left: 0,
  right: 0,
  bc: 'black',
  height: TOP_NAV_HEIGHT,
  alignItems: 'flex-end',
  justifyContent: 'flex-end',
  display: 'flex',
  paddingBottom: 10,
  px: 20,
  animation: 'lazy',
  zIndex: 300_000,
});

Which I render it in the following context:

return (
    <YStack>
        <TopNav
            key={`top-nav`}
            opacity={isScrollingDown ? 1 : 0}
            y={isScrollingDown ? 0 : -TOP_NAV_HEIGHT}
        >
            <H2>SomeText</H2>
        </TopNav>
        <ScrollView
            space={'$4'}
            scrollEventThrottle={100}
            paddingTop={TOP_NAV_HEIGHT}
            onScroll={(e) => {
                 //Determine if scrolling down to trigger display/hiding of top nav
            }}
        >
          //Arbitrary Content
        </ScrollView>
       <XGroup>
           //Links to various pages with the same layout that differ only in the content displayed inside the ScrollView
       </XGroup>
    </YStack>
);

The reason I figure this is related to tamagui is because the fix is to replace TopNav with an XStack and inlining all of the properties that were passed into the styled version:

return (
    <YStack>
        <XStack
            key={`${pageTitle}-top-nav`}
            opacity={isScrollingDown ? 1 : 0}
            y={isScrollingDown ? 0 : -TOP_NAV_HEIGHT}
            position={'absolute'}
            top={0}
            left={0}
            right={0}
            bc={'black'}
            height={TOP_NAV_HEIGHT}
            alignItems={'flex-end'}
            justifyContent={'flex-end'}
            display={'flex'}
            paddingBottom={10}
            px={20}
            animation={'lazy'}
            zIndex={300_000}
        >
            <H2>SomeText</H2>
        </XStack>
        <ScrollView
            space={'$4'}
            scrollEventThrottle={100}
            paddingTop={TOP_NAV_HEIGHT}
            onScroll={(e) => {
                 //Determine if scrolling down to trigger display/hiding of top nav
            }}
        >
          //Arbitrary Content
        </ScrollView>
       <XGroup>
           //Links to various pages with the same layout that differ only in the content displayed inside the ScrollView
       </XGroup>
    </YStack>
);

Created at 1 week ago

fork

robtaussig/tamagui_styled_component_bug