Search code examples
iosswiftstoryboardsplash-screenxcode-storyboard

IOS Splash Screen renders correctly then elements jump to top


So I have the following Splash Screen:

enter image description here

Which loads up normally but then jumps to the following:

enter image description here

My constraints are the following :S So I think I have my elements properly constrained and also when checking the different devices in xcode everything looks okay. But as soon as the app starts it initally loads correctly but before loading the next view everything jumps to the top.

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="16096" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
<device id="retina3_5" orientation="portrait" appearance="light"/>
<dependencies>
    <deployment identifier="iOS"/>
    <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="16086"/>
    <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
    <!--View Controller-->
    <scene sceneID="EHf-IW-A2E">
        <objects>
            <viewController id="01J-lp-oVM" sceneMemberID="viewController">
                <layoutGuides>
                    <viewControllerLayoutGuide type="top" id="Ydg-fD-yQy"/>
                    <viewControllerLayoutGuide type="bottom" id="xbc-2k-c8Z"/>
                </layoutGuides>
                <view key="view" contentMode="scaleToFill" id="Ze5-6b-2t3">
                    <rect key="frame" x="0.0" y="0.0" width="320" height="480"/>
                    <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                    <subviews>
                        <imageView opaque="NO" clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleAspectFill" image="LaunchImage" translatesAutoresizingMaskIntoConstraints="NO" id="YRO-k0-Ey4">
                            <rect key="frame" x="0.0" y="0.0" width="320" height="480"/>
                        </imageView>
                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="growthdecks_logo_white" translatesAutoresizingMaskIntoConstraints="NO" id="oIG-AW-V5d">
                            <rect key="frame" x="38" y="110" width="245" height="260.5"/>
                        </imageView>
                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="millesanders_logo_white" translatesAutoresizingMaskIntoConstraints="NO" id="RMx-ME-VmL">
                            <rect key="frame" x="103" y="398" width="115" height="82"/>
                            <constraints>
                                <constraint firstAttribute="height" constant="82" id="rA5-25-iAt"/>
                            </constraints>
                        </imageView>
                    </subviews>
                    <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                    <constraints>
                        <constraint firstItem="RMx-ME-VmL" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leadingMargin" constant="87" id="40k-Ob-jLK"/>
                        <constraint firstAttribute="trailingMargin" secondItem="oIG-AW-V5d" secondAttribute="trailing" constant="21" id="8zN-eu-A0s"/>
                        <constraint firstAttribute="trailing" secondItem="YRO-k0-Ey4" secondAttribute="trailing" id="CfB-dj-2FI"/>
                        <constraint firstAttribute="trailingMargin" secondItem="RMx-ME-VmL" secondAttribute="trailing" constant="86" id="D7Z-vK-LvD"/>
                        <constraint firstItem="YRO-k0-Ey4" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leading" id="Heg-3Y-CWr"/>
                        <constraint firstItem="oIG-AW-V5d" firstAttribute="leading" secondItem="Ze5-6b-2t3" secondAttribute="leadingMargin" constant="22" id="QGg-5c-RsU"/>
                        <constraint firstItem="YRO-k0-Ey4" firstAttribute="top" secondItem="Ze5-6b-2t3" secondAttribute="top" id="ZYU-cd-jlT"/>
                        <constraint firstItem="oIG-AW-V5d" firstAttribute="top" secondItem="Ydg-fD-yQy" secondAttribute="bottom" constant="110" id="nP2-0E-Opq"/>
                        <constraint firstItem="xbc-2k-c8Z" firstAttribute="top" secondItem="RMx-ME-VmL" secondAttribute="bottom" id="qQf-sf-irV"/>
                        <constraint firstAttribute="bottom" secondItem="YRO-k0-Ey4" secondAttribute="bottom" id="uzq-64-XwI"/>
                    </constraints>
                </view>
            </viewController>
            <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
        </objects>
        <point key="canvasLocation" x="75.362318840579718" y="250.44642857142856"/>
    </scene>
</scenes>
<resources>
    <image name="LaunchImage" width="2344.5" height="5075"/>
    <image name="growthdecks_logo_white" width="261" height="260.5"/>
    <image name="millesanders_logo_white" width="1152.5" height="260.5"/>
</resources>

I am using flutter but I think this is a native ios issue :S This is what it looks like in xcode

enter image description here


Solution

  • I was constraining my logos to the layout instead of the superview along the vertical axis. :S That did the trick for me