https://bugs.webkit.org/show_bug.cgi?id=272318
Karl Dubost <karlcow at apple.com> changed:
What |Removed |Added
----------------------------------------------------------------------------
CC| |karlcow at apple.com
--- Comment #2 from Karl Dubost <karlcow at apple.com> ---
This can be tested on desktop too by reducing the viewport size to around 700px max
The markup is:
<a href="/search" aria-controls="header-search-sections--16755375997097__header" aria-expanded="true">
<span class="sr-only">Open search</span><svg aria-hidden="true" fill="none" focusable="false" width="24" class="header__nav-icon icon icon-search" viewBox="0 0 24 24">
<path d="M10.364 3a7.364 7.364 0 1 0 0 14.727 7.364 7.364 0 0 0 0-14.727Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"></path>
<path d="M15.857 15.858 21 21.001" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"></path>
</svg></a>
On desktop when clicking, the `lock` class value is added to the html element
and this custom `header-search` element is switched from display:none to display: block
<header-search id="header-search-sections--16755375997097__header" class="header-search" role="dialog" style="display: block; --header-search-max-height: 761.8125px;" open="">
<div class="container">
<form id="predictive-search-form" action="/search" method="GET" aria-owns="header-predictive-search" class="header-search__form" role="search">
<div class="header-search__form-control"><svg aria-hidden="true" fill="none" focusable="false" width="20" class="icon icon-search" viewBox="0 0 24 24">
<path d="M10.364 3a7.364 7.364 0 1 0 0 14.727 7.364 7.364 0 0 0 0-14.727Z" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10"></path>
<path d="M15.857 15.858 21 21.001" stroke="currentColor" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round"></path>
</svg><input type="search" name="q" spellcheck="false" class="header-search__input h5 sm:h4" aria-label="Search" placeholder="Search for...">
<button type="button" is="dialog-close-button">
<span class="sr-only">Close</span><svg aria-hidden="true" focusable="false" fill="none" width="16" class="icon icon-close" viewBox="0 0 16 16">
<path d="m1 1 14 14M1 15 15 1" stroke="currentColor" stroke-width="1.5"></path>
</svg>
</button>
</div>
</form>
<predictive-search id="header-predictive-search" class="predictive-search">
<div class="predictive-search__content" slot="results"></div>
</predictive-search>
</div>
</header-search>
When the non working mode is starting, the `--header-height` on html element switches from 75px to 55px.
The lock attribute is correctly set, and the header-search is correctly set to display: block.
it is somehow not visible.
The reason is that
.header-search {
z-index: -1;
width: 100%;
display: none;
position: absolute;
inset-block-start: 100%;
inset-inline-start: 0;
}
set the layer under the rest of other layers.
Removing the z-index here fixes the issue and it has no impact on Firefox and Chrome on the mobile layout.
So there's definitely a difference of behavior where a reduced test case should be determined, but at least for this site there is a solution.
--
You are receiving this mail because:
You are the assignee for the bug.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-unassigned/attachments/20240409/218c8387/attachment-0001.htm>