From fdfecd32c33c41cf202d3b30c073bfb1b077e2d6 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 15 Mar 2024 12:03:42 -0400
Subject: [PATCH] fix(header): iOS headers in MD app are not hidden (#29164)

Issue number: resolves #28867

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

I missed an edge case in
https://github.com/ionic-team/ionic-framework/pull/28277 that caused an
MD headers in an MD app to be hidden due to the presence of an iOS
header (via `mode="ios"`). This was happening because I forgot to scope
the selector in `header.ios.scss` to only iOS headers.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- The headers in the relevant selector are now scoped to the iOS headers
which avoids this bug while preserving the anti-flicker mechanism added
in the linked PR.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

Dev build: `7.8.1-dev.11710452743.1ca99e5e`

---------

Co-authored-by: ionitron <hi@ionicframework.com>
---
 core/src/components/header/header.ios.scss    |   7 +-
 .../header/test/basic/header.e2e.ts           |  88 ++++++++++++++++++
 ...-descendant-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 1432 bytes
 ...descendant-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 2029 bytes
 ...-descendant-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 1351 bytes
 ...ty-ios-main-md-ltr-Mobile-Chrome-linux.png | Bin 0 -> 1351 bytes
 ...y-ios-main-md-ltr-Mobile-Firefox-linux.png | Bin 0 -> 1568 bytes
 ...ty-ios-main-md-ltr-Mobile-Safari-linux.png | Bin 0 -> 1079 bytes
 8 files changed, 93 insertions(+), 2 deletions(-)
 create mode 100644 core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Safari-linux.png
 create mode 100644 core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Chrome-linux.png
 create mode 100644 core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Firefox-linux.png
 create mode 100644 core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Safari-linux.png

diff --git a/core/src/components/header/header.ios.scss b/core/src/components/header/header.ios.scss
index 634303ff8e..cda084da7c 100644
--- a/core/src/components/header/header.ios.scss
+++ b/core/src/components/header/header.ios.scss
@@ -132,8 +132,11 @@
  * We use opacity: 0 to avoid a layout shift.
  * We target both the attribute and the class in the event that the attribute
  * is not reflected on the host in some frameworks.
+ *
+ * Both headers should be scoped to iOS mode otherwise an MD app that uses an
+ * iOS header may cause other MD headers to be unexpectedly hidden.
  */
-ion-header:not(.header-collapse-main):has(~ ion-content ion-header[collapse="condense"], 
-~ ion-content ion-header.header-collapse-condense) {
+ion-header.header-ios:not(.header-collapse-main):has(~ ion-content ion-header.header-ios[collapse="condense"],
+~ ion-content ion-header.header-ios.header-collapse-condense) {
   opacity: 0;
 }
diff --git a/core/src/components/header/test/basic/header.e2e.ts b/core/src/components/header/test/basic/header.e2e.ts
index 5550bc575d..67f3be9217 100644
--- a/core/src/components/header/test/basic/header.e2e.ts
+++ b/core/src/components/header/test/basic/header.e2e.ts
@@ -85,3 +85,91 @@ configs({ modes: ['ios'], directions: ['ltr'] }).forEach(({ title, screenshot, c
     });
   });
 });
+
+/**
+ * This test only impacts MD applications
+ */
+configs({ modes: ['md'], directions: ['ltr'] }).forEach(({ title, screenshot, config }) => {
+  test.describe(title('header: translucent'), () => {
+    test('should not hide MD headers when using a descendant iOS header in an MD app', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28867',
+      });
+      await page.setContent(
+        `
+        <ion-header id="main-header">
+          <ion-toolbar>
+            <ion-title>Header</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-header collapse="condense">
+            <ion-toolbar>
+              <ion-title size="large">Header</ion-title>
+            </ion-toolbar>
+          </ion-header>
+
+          <ion-header mode="ios">
+            <ion-toolbar>
+              <ion-title>Welcome</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        </ion-content>
+      `,
+        config
+      );
+
+      const header = page.locator('ion-header#main-header');
+
+      /**
+       * The existence of the iOS header in an MD app should not cause the main MD header
+       * to be hidden. We do not have toHaveVisible because the behavior that hides
+       * the header under correct circumstances does it using opacity: 0.
+       * Playwright considers an element with opacity: 0 to still be visible
+       * because it has a non-zero bounding box.
+       */
+      await expect(header).toHaveScreenshot(screenshot('header-md-visibility-ios-descendant'));
+    });
+    test('should not hide MD headers when using a root iOS header in an MD app', async ({ page }) => {
+      test.info().annotations.push({
+        type: 'issue',
+        description: 'https://github.com/ionic-team/ionic-framework/issues/28867',
+      });
+      await page.setContent(
+        `
+        <ion-header id="main-header" mode="ios">
+          <ion-toolbar>
+            <ion-title>Header</ion-title>
+          </ion-toolbar>
+        </ion-header>
+        <ion-content>
+          <ion-header collapse="condense">
+            <ion-toolbar>
+              <ion-title size="large">Header</ion-title>
+            </ion-toolbar>
+          </ion-header>
+
+          <ion-header>
+            <ion-toolbar>
+              <ion-title>Welcome</ion-title>
+            </ion-toolbar>
+          </ion-header>
+        </ion-content>
+      `,
+        config
+      );
+
+      const header = page.locator('ion-header#main-header');
+
+      /**
+       * The existence of the iOS header in an MD app should not cause the main MD header
+       * to be hidden. We do not have toHaveVisible because the behavior that hides
+       * the header under correct circumstances does it using opacity: 0.
+       * Playwright considers an element with opacity: 0 to still be visible
+       * because it has a non-zero bounding box.
+       */
+      await expect(header).toHaveScreenshot(screenshot('header-md-visibility-ios-main'));
+    });
+  });
+});
diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..06b4e5e7c77cd468d12e31c81a56a6e117fc5ec5
GIT binary patch
literal 1432
zcmb_c`%}_+6#Zb?m=>FrWo8cz&9ux~9j$ynQqp{&lb9Ngnd?~O6ib-kqh?$)M`j?<
z%v^MIML{7^(NMysEfP&F5<(N)FdvwKiH}5Vzs>#&`^&xOmwV5-=ia%+(UGBB&27v9
z09%n^!6*P=#Sr!~+XO{3?~Mv5!EmV1K)@NWodLiUg$xde%YHofF)B=&Z!4ZJAC<iH
z4Ai+DVF%eI-@iC+r`d+F*T_Uc`TOv{nwdPGjyoG|nO2liX1O5%O*Oll{rcp+hPIf%
zErK)(KD@m3p=xgQpWiTiOx}ty<Cr+dH&Qik^iqD&-TrDY!r4i3yea7MCRz9ZP))Mj
z3<@kM09gNDz_>`Uwy~jNM|s%9iiq?YF|2@xqJ{<6#whsBKEx$!c^jWE;bYs|+Gwd8
zK~I)WjzI#@e-FY=Plh(ERjR!-Gc#|;$E$tw)|~oyJK;sc@88$0uC6j<qT35+$HvBT
z7B%#GCezBiu<c6Uu6@2Fba=VzF|=W6E-|DwrnI!QSG&w^X^EMYHM?Yz9~_Qyu87dQ
zrW|@yQSq~{jEmux>^@#LE`=5Nv778EZ_@FT{d*j?Z$`eOI)uBQI@MTHV+U!C@Vx%f
z=|gpBXefT^OTsDgAxMpRq5FvwHQC-AW)y=}TN_le>lhW0yP^wVMpmItSCt`5O<+FR
zI{z0hUW5$VA%#Mrk~rAkPt(Pk6!<Zlu6w>z-+-8gWwM{uMx*h*Se==XF{IbGoj!BM
zLZ*6(3ni<aY~gGsGqeRA@irqaPlQpc)j2D=nvNw|bK*Isly@{do|E*pr>7vb<>3WR
zQi9%=N{eK+UzNL7`Q=}tgw+Kzwt=+-2O%}=FBA`J$meRc+H%A`pPaa>at<8<(QAfk
zf=&~@KK|1$pOfTzn4x9xlb?|iII}E)V5BP*-I`unb{xZ5)~c?ONJ&&$Z<>ChcL(yF
zQb=sSy^xMX<>m_E`@I_=>#aPB5ZEyR9g_)b@Ny81(L|KVzRx#JxqkWUO;HSABz0tT
zbXciem#RpHrSpw(=R7<-sE9tE{?ki~u`WVXZyG8#Hr7-->qT}auxG^c_2(<il~V2U
zZl9t_dlNvfucM&(*D7*|#3>*7$Owx<vD7Y3Ow<uR4h<db<4qd7SS)94c1ntWJogeE
zf&K6#;LNQr(Qejp7!0GnzP=le5#=qC7d)4~uSsk{bfaYQIo{1$Plm?(!RTnb`SkI1
zW%m)}NJkdqQDvnN2d&SP@>(?=+xR}KY6EaiP<VI33j>wuzN+KoZ`@7p%cVcWe;j}p
zSq!`x7}(W)sU@{=x&PDWzH-wkp5j^z4){B`REDjPeCL$HM5=ye{xY6GAXXZuryJ}k
z_n>R;UW80waX4j@>p!S!FG<=-L9T)C=;&D2J+=RizyBy7`v5T}B*qs92XbaLkWCtm
z#yJxX8q%)dx{y?;%d1zfXc3OX3PmIOXubcz@m%7dsBmK8`|smDFgzYVvu-rx=%*=3
za=O~<o53haZ(aTNxuj$L@8TUcd-lXQ(^28!B_?+YY{f@9g?g9&G`nnm<MT`Bt+_|!
z1Ad%gc6>PQ#D~rswXR8>)tAL&tEQ~XOcV~+dZGEE1CqsNOJ}6acHC4X^4+YQD{O~o
z1$jn+&ECCMTQ;?4&!=Kl&yulNY{(!C&{-0EGNGmj02-4gph9W4Jq)<nZwKJe{|Q#%
X>pLwe^E!nDdbI!<5*f@1Ou73nlT4<J

literal 0
HcmV?d00001

diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..6f6ca4833eebf018e166f4cbdb528a6ff26e544f
GIT binary patch
literal 2029
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

literal 0
HcmV?d00001

diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-descendant-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..2a1256528873adcc2079af7d9bc2080b1ad66c17
GIT binary patch
literal 1351
zcma)63saH_6#cZ4axs%Jb6d+oib~VnT1(Bu3?CSgfkrB2iIreFp$0xPmn|WO3f;Dp
zz=#wdi;vY(BBHd?#uPR)1w-5LxrL;pD4Hzo><@76%(-{&+&O2?%$>sw!vxz{ueAmM
zzy=k9!~%fDW%KN{+|rEHh_)r>W)*uN7zvoZ)g7s@5CE3WqmcW;({5|~4uurvI6aw=
zzaVn{2wYDt_4Kt5TqCdwFm15HHd==o^V(Kf(%o0+A%F1^VQdiPy@C#!qoY!LL+@hC
z{l7<s)0>e|Gb6R66w&?J)S1cXN!R8ZogQB<aM!Pw8I_v9J7{uVB)ZEUP|(j;!~np&
ze*qBxE6hT%9A$aOu3)LZ3v9*3pb!Yax()-@ZbSh;2Q2oWZD8}(Rm;<){dAD+!n})Y
zKsS}aDK1_}ex}=dVZQg{RED%4y}7=e4%k~r{wJTTfp6t>xKAAbKGP4sI;lMSKq!Pe
zt-Qu!d7H5n7ZamP77tgan-;QZG(-DMk29xF6Wn{QuG@3f88Lp&Yx29GpdicKCsp_w
za7%f0b^oLElzli%iQm_0ZJ$f<RTzYso11I%!>)Ht6k?r+(-Ys-9w;%PS}gX4Fd2+)
zGOJaSot?dZ|Ng|p#Hu4AYyy-Wl9H0Li*sLj))ikpKQo~bMK@Z3Kz%9|xMdals2g?o
zRZ-lIinoZ2FQa2!!b=!CHjl?6xWl0i`K4R%wkM7|d}2ip!|UtoQ`Wo_r@$dhFK*|@
zo*G2fOs#pRet3Q&?U6v>A}gz}-^uAnQa_v;S4-4twMZnod=hMHYcLq9mOVZ3V-Z@V
zoz{=Y^8)z(8)`GA{s|B=7^Gsq5)Vf(Z*L}*zpw;Y=x_d1P$m=_bOWY2PcyDz3xcm5
ziHKk_`m}zO56_0$Z<Zi(l8VbzBEq9I3YGdcsj=_uE<0rd374KeJ32a=XX}iF6~6S%
zoJJ#8I(gM*8j|dkO%%<`LU;{9j8)j%DJ3*r9kJD6P-WqE2P&oHw`zz)A{4SR4`gNa
z=4JS{O;EE2W^*A%h(q4SoPj~cv|3h>fQf|4<i=?&hw&`-r}Mj2nu$SEG75#_<B)N)
zlSBC#Qefd#GmP~7%4(@pYT7eqm;-@8-4rN03?vW;5GG?!O-zJa0AJBvg%6Bt|9yMr
z^ryN$Ek7)tOb*>XXQuGk;_5m#)P8Hk9#Cz2?OxH)5WbGkbnfIxCs#%w7N5?{lrWrp
zQp@Y=4s)|6J_P!qX65QPFGl2LfFhF3JCH0Ukn;+15T$4|dhnWNqN!4D{v17g<if#w
zckjk3|2zeSu!8jPgI#X%)&O_)R+K~jse#AY(APaZH2rW#st>n)i07OBTA@&McbC5X
z?ZyqImTH&&`Tag0E~XTl>;Jw>cxW<)25#xSpKz1$?s0asdS_@U)-bMi{f|*6zGpOk
zGb&5hmr1329l=qeBU5qLRWl66^H}e!nR9qNJ|{<}8ZMW&p}TGu6&+5<@*6Pg4GzW~
zJEk^HeQa%Q)$hJF?7i$_=M}>x2&aRpRe6@k@sW`v#~>1E>_K9m`>}`N(b1e393J1(
z+dE2?*t8s#P_-2}A(>1@4yq+I^3!6^gs7;f%Bm`x7Ds32n#xKa+Bkua1LE6v7><Jh
nH&M>lghrrY(Sfk2NMY-yH|`|mZQ?P_$q1kVG05tG6Tkcmz`~C1

literal 0
HcmV?d00001

diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Chrome-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Chrome-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..dab34d6786975f4c1b83eda5ef0f23d58509d43c
GIT binary patch
literal 1351
zcmeAS@N?(olHy`uVBq!ia0y~yVC)34bvW37<b-OM5Fo`^9OUlAu<o49O9lp3Mo$;V
zkcv5P@A!Iz#L681xPJ0Z4&yB+OJp)+xKt*baCMusMKdw#i;?v8t(oGih8$0w)^=nB
zN^C25s3aaFz;bhu(qaywwV4+eFz-F!(`US|h1W>+?49(FHgQsKY-~TL_$lw_=ebjT
z{^7s#bI!h>S3FbGYiW>}l9H1BgA?BwTwI=<UphfRP*AzGrK3YaQ^m#Qh=-!0l9C%2
zr=Xx=kVi*H$3!P57ndFpAtj}xCHRzjIC`iE`S|%w@==?<MRl^Ln!38DijcO^w9Cu=
ziys_d)QjD<Md_={Cr?F1)`bffHr~1wWo2bGZOhi}+k>N{y`7y8clD@B@O=96GWgiB
zV_{3?dDy|+vwBu)<dGypyV_qVZ$3XgExzcY1~)hNF*{>p<C=eeDkER%Uh6rUWWRU5
z$39J!l&ia{zG}(!v#-D2efnwA`+Iv?njLrBO7&j4b;~O?RrU6^+{KF)G3~$aZz8qz
zw~7#Fjh%en_SvgeY5l3&Z>aNc?Y%Q+c$O|*I%V3lqKAiAx8>YCbZu>Pc!HQqop0ej
zc7;jZD_3g9?XR0#np;&><+=a!^YfRlUS(~#{yMd+Y}&+$f_!o|Cr(e-FSME~V^z`-
zpyA@{%iG)A%friSXkl^U%NG;>c{Yp>j&us!)cuiQ=s$jVv3viIUthD&eZ96O(%EV*
z+k(xTg&VeJU)THnr$fhlt;&)GJUl!bs=vQmbN=n^?VEp{IeWJ7=ciPLTeogie169J
zus{N6$eTAhwY9Y_ivzQ=vTp3Jw=aKpXW{<+^Rut7V>Ga_@v)Ihuc?{y`}=$53s<kY
zYKSD|<n)}KZT>vweRXMR>6h={KR-CweBUZu>9nIZr>2JAa^dNxr<Ud>B`IZ_etdJ&
z_;=?1MT?rEx92fFDBAhs!$ao9ix;ynF}}OE*IPyC;m^;{ZEAi@D1U$N=J$@{k6R8W
z{{C}gV=_ZXXz0VQRh`ElTVA!U`?KTj|2H=`%h*<x+<fl#q&&dG!!a{AckBFH;&ZJ^
zyQIzYZalyLKkm_)na1Al49(5cw}1WeWrE-G$nANt*S__qM*8^rG6n<%IaOBfEcE%m
z_1+>Nm|y2V(Z1EmDQxbhO-8?WEMMM!>eQ(<-+HCZjZ92j%FE3e%=7OZdH?<Mqods4
z-ri3C9(^Y)Dk4H*rq8CjzrX&+`Y#E1Ik#nvRrR+w3wQi@|9t+%i-A#5Q6GNR<lNsk
zH^IOoIaxXX{yx?N4+}0_y2LbL>t2?C`1pKz{e9uU<i4l=zuogHrB*L(&dAbLt5;iA
zeo_fv7qf8t_UXXr3XF?8_v44f%aU2Uc3G9Zz14d7p~B>o7p`1sx%@JvqT<HB<A46x
zSeLyy@cc6{Wq2qEECA~BP;t_ldTM7}adEL+n$wf(nW~DbgVNL0#r5M-E-&*1W&@{%
z0@7wV5AN(Nma(gu@#|OBuHCyewY8OH_>7H=oPee*S;F$~=WE`E*Vory23nRH35<`j
zcXv)sRCX^~ryjJTD`@4EsqY;-{^-s0Y4cENN{!rcH?KN6<Kp)G`#*ksRK9xkYMH~I
z6Gx7)%=BT~e*3TYR~N2ca4E3mt_oRY18Ol6^5@mn)iwQ&E-wE9>KPvu{F`BwH1`v*
PWMuGk^>bP0l+XkK7yW@F

literal 0
HcmV?d00001

diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Firefox-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Firefox-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..5b9c0f573d2a8dea7d7eb82b3af52b4024c27296
GIT binary patch
literal 1568
zcmchX`#;lr9LGl#%UG)Ev|Q#|E?K9t5N4KrH<^2Kl3S(D9HGOG<<fLk(m6Dym2|9e
z!rY3J#TeS*)K-YIQXbAoPGdFXG!sT&=YKfom-plKxxOE-&-?R!<^_@oFz9wD1OkB(
z0emn7qLl|~N4@o6WM<$)ArM_T5$_$E9;F=d0}#h|JpS1EgJ5S4P;ImO99Itoy&AiF
z1PJ6_w`jSaZvwzKedIqc$1}Pj88OA|aT_%BQ8L%TpMed;*z>9rMQF<&gXq2-`J2YU
zGI2>GjWa_ZJN0h4KeG?*)qgvvv%bFGBi09^r31%~VYIUuIzzhJdKUC9Z*5Sn|5xUK
z(qzM$grFYnr$ay$6G<;&r0gxgf(J8w>CD*@?mPS@aP(H2@juT~r}O&y`bZ?wRnMG`
z4$oGqa=3#<B$L^#t*&CRxUj6u>}kLQF4y~3X{n8y+cyXV!towKOQ#@&&OAWQqGZ@$
zf%KkkvffckEO1mrs)&a!NBfK~sb`G0Y&mJWH4zmffS_XCcEN5r&0<iEZEX%l=AOm!
ze$G>g<SHJIpL`so2pZspRHd49W-V2kBVh&xPZk#icwb+M>iy7NKL3bFBpRvW4%3zw
z8oxVxmgMVunUS0Op6X$a(ePwd0i22D&;JN|Gt|@KKdS;x(P$AJ*&2$Ai4ql41E#jO
z%a1^TsS7zA=X+7Y!M}nq%g)gqll@?DOd9QY!Kr<|&CHCw*^Uh0a2F2;1pFj;9W6W`
zwz#yU@-#Iy4L)+D(#y!ukZtajJ!#ZTyWGuD&@MBc0=<@znkG@c%O<oBor(4-baC7|
zYmoOlv=z}nAQ1kRTz43k%k7e6?S*x9j<nSk;mP=T1w0VNjfWA5L_zBf=V%g@$}e*Y
z4Go=~$y#0r>bvb~m6DRuBoNq7O-;=$suF^(U6G1DOQpr`*6qA1+>`yRmh_M1Bf^aE
z^73-)J$nX%-M16Qs<j#2LAtK8b6Wk(S+#lybD_UiRVs9_uBolP+uR&R=6E_`l4Pkf
zH6pBs>{|+@Xl`yUD=~9rIl|V~cH)nG<l+*G#c~7U;^ICHIY+f8uYQm}EN$n72L_HA
z=1otZ75DZwkK}9X-9%x5n_K|NhHlFmNnM&xoKh-1?gyw;s^IW&J1Z-z!NI}ub+M;U
zpB`PAkqKE{U08MPLkgeCW>=~|yMiXdBO?z3N6%k>-Vz4>_OPZ03AgA2%)s9m^Yc{K
zjQP6Eh1oYZN^%vio;~}yW2!ddia=cZ*q?%Gt*IfYk6r3+{a*elcX<7V4JyyhjrvIn
zS_2WyLMsRFppZIx`bg%klzmziDDF!XXfbs_A|Yu?JBQue-P7RvTwEk9yMT$lU)<fW
z(o%nl##`73zWs!uelrzrZtm>o=XdV?OQ$J?qDUz8&{P9X>1~JxA&&s;P;MWae7o7g
zx}d*I5(V7`(@(Ps$Edhm)Nya2a0?uMXUGbN!{M7BHa2oiDqi5IXU<e-*N0uoNkAfz
zEU7e<Hvgfdn9WusMYkk-^ZERfiHZIflu*zBPtb5FA>KI3@L-!}GgwHkJqD@c=rs?+
z!I)LTHM1#Qc~8$FSK8dKk%Ckrg+jq=kVehCuevl#>QmX-QE?|us46Opii}^&WG|E4
zwjvM;jnp#z*s;<TcYW22cWBGO^x3f+ovZ_OW_$G;QmUYEW3s91Vm`>CR~A^{75%V2
z2(T_5SdS1wLADhLDHlDsv5Q5BHb}N)u#4VE3oAxJgwbK(9@vxOHFDjy#{vh^CMGd!
zMEeo!v~^$Gz`=$8<a+w(!oorsENy4b8bHUeIjazH(?<2iG7SMFKZJOQjBmijT>Jt+
CtH{~_

literal 0
HcmV?d00001

diff --git a/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Safari-linux.png b/core/src/components/header/test/basic/header.e2e.ts-snapshots/header-md-visibility-ios-main-md-ltr-Mobile-Safari-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..83c2b8a50ec3a08ae31628057e9b1fe33e2c7156
GIT binary patch
literal 1079
zcmeAS@N?(olHy`uVBq!ia0y~yU~B`jbvT%S<U65`J|M-G<n8Xl@E-&h>|H*Yfr0sr
zr;B4q#hkadY(28-WsZMb?|;K^krI#3ingYZNotD^9#zZ`;A)znCM}h7(QAT67WXFA
zDur2D9xoaVnmCqd2B{QvD7<jAaCYPmTc)Y?O!nMS=|3x97v%qYxBq;$RaIa7`STCo
zp7)sIqsGb5!22laJ_Ex6eGef90~SvvhBgIHh64gBoD338DvS)y6I2)yI3}?$@HkFl
zXi&tf=u7R&t66=I=lDJUtuD*Qe!MVi>o5L&6Hlf*vN)Hu_20pnAL?5nMka))P1gLT
z>maD$`9V55I@)dV##O7lmIg)YOe?U^v6=6oa_so=tx>tIuB~p13wOro>+2s{Sz(j6
z`DTb#Xm0M?4<8D&rfQ|6sR%u^=zF~5<;%>ue&LakKc}8%ar5Y|Wj?T_wY7EOLPaGl
zUESWJNpb71zyB^TD;pXf{{7pxcW>Vo$}GS9($CK?EiLWP!w<iHSqa|E+1A_3tMtes
zudZ(2ftf;`E;|x(a(X&ajBbXn6Om|)y;N>)Zhn04<{dj`*o$@_ZL#X<>A7?N{%4!}
z7cLZ(mv7&)rKGU%;pd+!LY>DSTiV#nnKesk(cHOnGfb*VOSkUa>FH9o`|rbt4}bjl
z@we{z<e5LSzf}GG_HEn!_y0HXGu{AMpf1#T<Wc;6pZxs%oiTnEb`};MDnc$Lb#*|0
zf4bh{wD97^ixoC{HZ^s1>sGH8?yH=)f6pEfH6A{`uA@n7!){->BErE^XKh^nrfBD_
z+qeH8ih3yDpi*1T%*>p(-TME9hXqf}y|!=PeyDN7>yy>BwW><<&p$8Q-Fz^?YHnS9
zSjAKywP3BO|7&-jPiF!~%)(EfiXJM6aAlgz`o7%H-+%Y6U7K#MxtjI%#ft}(cK`qT
zYEA9xFq-M3G%-L!r1gA{i&A~E=!g7+_a{AYc3T{%H(hw*<(EBfi(P=O(h>8vn#;%5
zd^0CZMab9BZ`RpoH5nZ%mM(Sup}J$&E-#n<{(hVD;zpmd#o2qDfChLiElNsi>iG8k
z`_-&cU*F!7DW9tL?%utdt=Um)>a(Jq$Bw!6x?R41Uw@CvOrLAluYdpYMPTCHy!_nU
zt65utG1YqJ&o5S{<_Ri4dhX`MM@MI8XHP!;bY;k?1cNne)|8Z$nVFkc+sN&Wn}0S<
zl<O$atDc^mg24C^y!hr#PJDcPWaQ1SU$@@OdH3#}UP@YF7)Otw>g1D2_n8?E_}@?^
qEn{Hh9*_C+=5^KbGcefyWmqEBvF%lT`FvnWz~JfX=d#Wzp$Pz)eB<;0

literal 0
HcmV?d00001