<?xml version="1.0" encoding="UTF-8"?><rss xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"><channel><title><![CDATA[Startup weather box have a grey padding]]></title><description><![CDATA[<p dir="auto">(I didn't found the upload picture button on here. I will try it on the reply.)</p>
]]></description><link>https://community.windy.com/topic/43952/startup-weather-box-have-a-grey-padding</link><generator>RSS for Node</generator><lastBuildDate>Wed, 14 Oct 2026 17:45:55 GMT</lastBuildDate><atom:link href="https://community.windy.com/topic/43952.rss" rel="self" type="application/rss+xml"/><pubDate>Mon, 23 Mar 2026 08:16:51 GMT</pubDate><ttl>60</ttl><item><title><![CDATA[Reply to Startup weather box have a grey padding on Wed, 29 Jul 2026 09:16:14 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/tomacat" aria-label="Profile: tomacat">@<bdi>tomacat</bdi></a> Thank you for sharing all these details, now we know that this CSS issue is related only to Chinese localization under Firefox.</p>
<p dir="auto">We can start to look for a solution, but for now it has a low priority to be completely honest.</p>
]]></description><link>https://community.windy.com/post/230323</link><guid isPermaLink="true">https://community.windy.com/post/230323</guid><dc:creator><![CDATA[Suty]]></dc:creator><pubDate>Wed, 29 Jul 2026 09:16:14 GMT</pubDate></item><item><title><![CDATA[Reply to Startup weather box have a grey padding on Tue, 28 Jul 2026 16:17:07 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/suty" aria-label="Profile: Suty">@<bdi>Suty</bdi></a></p>
<p dir="auto">I had my OpenClaw agent look into this issue, and here are his conclusions:</p>
<hr />
<h2><a href="http://Windy.com" rel="nofollow ugc">Windy.com</a> Search Dimming Background Bug — Analysis</h2>
<p dir="auto">I've been investigating a layout bug on <a href="http://windy.com" rel="nofollow ugc">windy.com</a> where the <code>search-dimming-background</code> element appears disproportionately large on the Chinese (zh) version of the site compared to the English (en) version. Here's what I found.</p>
<h3>Key Finding</h3>
<p dir="auto">Comparing the rendered HTML of the two versions, the root cause is the CSS custom property <code>--search-input-width</code> set on the `` element:</p>
<p dir="auto"><strong>English version:</strong></p>
<pre><code class="language-html">
</code></pre>
<p dir="auto"><strong>Chinese version:</strong></p>
<pre><code class="language-html">
</code></pre>
<p dir="auto">That's a <strong>94px difference</strong> (382 vs 476). This variable is almost certainly used to set the width of the search container and/or the <code>search-dimming-background</code>, which is why it visually "bulges out" noticeably.</p>
<h3>Why This Happens</h3>
<p dir="auto"><code>--search-input-width</code> is not hardcoded in CSS — it's dynamically computed by Windy's Svelte/JavaScript and injected as an inline style on the `` element. The JS is likely doing something like <code>viewportWidth - rightPane - margins</code> to calculate available space for the search area. Under certain conditions, this computation yields a wider value on the Chinese locale.</p>
<h3>Reproducibility: Firefox-Specific and Intermittent</h3>
<ul>
<li><strong>Firefox only</strong> — Chromium-based browsers never reproduce the issue</li>
<li><strong>Chinese system locale only</strong> — English locale is fine</li>
<li><strong>Intermittent</strong> — Reproducible on my laptop (Firefox, Chinese locale) and on a UOS (统信) machine with Firefox, but NOT reproducible on an Ubuntu machine with Firefox (Chinese locale, via Alibaba Wuying Cloud)</li>
</ul>
<p dir="auto">This pattern points to three likely factors:</p>
<ol>
<li>
<p dir="auto"><strong>System CJK font differences</strong> — On Chinese-locale systems, Firefox falls back to system-installed CJK fonts (e.g., Noto Sans CJK, WenQuanYi, Source Han Sans) for rendering. Different Linux distros ship different CJK fonts with different character metrics (glyph width, line height, etc.), which affects DOM measurement APIs. The Ubuntu cloud instance likely has a different font set than my laptop and the UOS machine.</p>
</li>
<li>
<p dir="auto"><strong>DOM measurement inconsistency in Gecko</strong> — The JS code computing <code>--search-input-width</code> likely relies on APIs like <code>offsetWidth</code> or <code>getBoundingClientRect</code>. Firefox's Gecko engine handles subpixel layout and CJK text measurement differently from Chromium's Blink. Chinese UI text in the right-hand pane (menu labels, tooltips, etc.) may measure wider on certain font configurations, feeding a larger value into the width calculation.</p>
</li>
<li>
<p dir="auto"><strong>Race condition with font loading</strong> — If the initial width calculation runs before web fonts or system fonts are fully resolved, the measurement could be off. The intermittent nature suggests a timing/loading dependency — network speed, cache state, and font loading order could all influence whether the bug triggers.</p>
</li>
</ol>
<h3>Verification</h3>
<p dir="auto">In Firefox DevTools Console on the Chinese version:</p>
<pre><code class="language-js">// Check the current computed search-input-width
getComputedStyle(document.documentElement).getPropertyValue('--search-input-width')

// Check actual rendered width
document.querySelector('#search-dimming-background')?.getBoundingClientRect().width
</code></pre>
<p dir="auto">Comparing these values between English and Chinese locales should consistently show the discrepancy on affected systems.</p>
<h3>Conclusion</h3>
<p dir="auto">It's not the <code>font-size: 18px</code> directly causing the issue. The bug is in Windy's JavaScript width calculation logic — it computes a wider <code>--search-input-width</code> under Firefox + certain Chinese system font configurations. This appears to be a Gecko-specific layout measurement issue interacting with the app's dynamic width calculation, triggered by the zh locale.</p>
<p dir="auto">Would appreciate the dev team taking a look at how <code>--search-input-width</code> is computed in the Svelte search component, particularly around font-dependent measurements in Gecko browsers.</p>
]]></description><link>https://community.windy.com/post/230299</link><guid isPermaLink="true">https://community.windy.com/post/230299</guid><dc:creator><![CDATA[tomacat]]></dc:creator><pubDate>Tue, 28 Jul 2026 16:17:07 GMT</pubDate></item><item><title><![CDATA[Reply to Startup weather box have a grey padding on Tue, 28 Jul 2026 14:11:31 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/suty" aria-label="Profile: Suty">@<bdi>Suty</bdi></a> I recorded a video; the issue remains unresolved, and I suspect it is related to the <code>font-size: 18px;</code> CSS property. (Edited: I might be wrong, too.)</p>
<p dir="auto"><img src="/assets/uploads/files/1785247479762-output1.gif" alt="output1.gif" class=" img-fluid img-markdown" /></p>
]]></description><link>https://community.windy.com/post/230298</link><guid isPermaLink="true">https://community.windy.com/post/230298</guid><dc:creator><![CDATA[tomacat]]></dc:creator><pubDate>Tue, 28 Jul 2026 14:11:31 GMT</pubDate></item><item><title><![CDATA[Reply to Startup weather box have a grey padding on Thu, 26 Mar 2026 07:21:41 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/tomacat" aria-label="Profile: tomacat">@<bdi>tomacat</bdi></a> Hello, we are investigating this issue. Thank you for reporting.</p>
]]></description><link>https://community.windy.com/post/226266</link><guid isPermaLink="true">https://community.windy.com/post/226266</guid><dc:creator><![CDATA[Suty]]></dc:creator><pubDate>Thu, 26 Mar 2026 07:21:41 GMT</pubDate></item><item><title><![CDATA[Reply to Startup weather box have a grey padding on Wed, 25 Mar 2026 13:01:31 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/suty" aria-label="Profile: Suty">@<bdi>Suty</bdi></a> said in <a href="/post/226183">Startup weather box have a grey padding</a>:</p>
<blockquote>
<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/tomacat" aria-label="Profile: tomacat">@<bdi>tomacat</bdi></a> Hello, may I ask which browser and OS do you use on your device?</p>
</blockquote>
<p dir="auto">OS: GNU/Linux Debian Trixie<br />
Browser: Firefox 140.8.0esr<br />
<img src="/assets/uploads/files/1774443531424-2026-03-25_20-58.png" alt="2026-03-25_20-58.png" class=" img-fluid img-markdown" /></p>
<p dir="auto"><img src="/assets/uploads/files/1774443589712-2026-03-25_20-59.png" alt="2026-03-25_20-59.png" class=" img-fluid img-markdown" /></p>
<hr />
<p dir="auto">OS: Linux UOS<br />
Browser: Firefox 146.0</p>
<p dir="auto"><img src="/assets/uploads/files/1774442769161-%E6%88%AA%E5%9B%BE_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20260325162212.png" alt="截图_选择区域_20260325162212.png" class=" img-fluid img-markdown" /></p>
<p dir="auto">OS: Linux UOS<br />
Browser: Chromium (Can't reproduce)</p>
<p dir="auto"><img src="/assets/uploads/files/1774442961733-%E6%88%AA%E5%9B%BE_%E9%80%89%E6%8B%A9%E5%8C%BA%E5%9F%9F_20260325162705.png" alt="截图_选择区域_20260325162705.png" class=" img-fluid img-markdown" /></p>
<p dir="auto">OS: Linux Ubuntu<br />
Browser: Firefox 149.0 (Can't reproduce)</p>
<p dir="auto"><img src="/assets/uploads/files/1774442986015-screenshot-from-2026-03-25-17-04-44.png" alt="Screenshot from 2026-03-25 17-04-44.png" class=" img-fluid img-markdown" /></p>
]]></description><link>https://community.windy.com/post/226243</link><guid isPermaLink="true">https://community.windy.com/post/226243</guid><dc:creator><![CDATA[tomacat]]></dc:creator><pubDate>Wed, 25 Mar 2026 13:01:31 GMT</pubDate></item><item><title><![CDATA[Reply to Startup weather box have a grey padding on Tue, 24 Mar 2026 10:40:32 GMT]]></title><description><![CDATA[<p dir="auto"><a class="plugin-mentions-user plugin-mentions-a" href="/user/tomacat" aria-label="Profile: tomacat">@<bdi>tomacat</bdi></a> Hello, may I ask which browser and OS do you use on your device?</p>
]]></description><link>https://community.windy.com/post/226183</link><guid isPermaLink="true">https://community.windy.com/post/226183</guid><dc:creator><![CDATA[Suty]]></dc:creator><pubDate>Tue, 24 Mar 2026 10:40:32 GMT</pubDate></item><item><title><![CDATA[Reply to Startup weather box have a grey padding on Mon, 23 Mar 2026 08:22:47 GMT]]></title><description><![CDATA[<p dir="auto">There is a large grey padding on the startup box. The problem may related to UI language (Chinese). but I had reproduce on the another machine every time.</p>
<p dir="auto"><img src="/assets/uploads/files/1774253861282-windy_firefox_20260323155049.png" alt="windy_firefox_20260323155049.png" class=" img-fluid img-markdown" /></p>
]]></description><link>https://community.windy.com/post/226153</link><guid isPermaLink="true">https://community.windy.com/post/226153</guid><dc:creator><![CDATA[tomacat]]></dc:creator><pubDate>Mon, 23 Mar 2026 08:22:47 GMT</pubDate></item></channel></rss>