Conversation
…Lenis together, add truthy checks, add some fallback color CSS to avoid WebKit var()
…erly override Lenis blue issue
|
img attributes are used by the image preloader and ignored by the final WebKit renderer and media queries override. |
There was a problem hiding this comment.
Some changes that you made breaks the design:
| Before | After |
|---|---|
  |
  |
The smooth scroll is broken on Firefox. When I think about it, there's a css rule for that that we could apply on html directly so we don't have to do all this to get the smooth scroll.
html {
scroll-behavior: smooth;
}PS. This and removing lenis should've been done in another PR.
Also, as far as I know, CSS var hss been supported on every major browser for a while.
| <link rel="preconnect" href="https://www.gstatic.com" /> | ||
| <link rel="preconnect" href="https://unpkg.com" /> | ||
|
|
||
| <script type="text/javascript">//<!-- |
There was a problem hiding this comment.
What's the reason for doing this?
There was a problem hiding this comment.
Pre-initialize the new HTML5 tags so that CSS can be applied on them on non-WebKit browsers.
| <section id="info" class="bg-secondary"> | ||
| <div class="container-fluid info-container d-flex flex-fill"> | ||
| <section id="info" class="section bg-secondary"><a id="Info" name="Info"></a> | ||
| <div id="info-section" class="container-fluid info-container d-flex flex-fill"> |
There was a problem hiding this comment.
Why did you add sections? They don't seem to be used.
public/index.html
Outdated
| <div class="col-lg-6 d-flex justify-content-center align-items-center separation left"> | ||
| <div class="row flex-column align-items-center box"> | ||
| <div class="col-md-6"> | ||
| <div id="goal-content" class="row flex-column align-items-center box"><a id="our-goal" name="our-goal"></a> |
There was a problem hiding this comment.
?
<a id="our-goal" name="our-goal"></a>There was a problem hiding this comment.
That's called a proper HTML anchor works in all browsers
There was a problem hiding this comment.
I understand but it's not used. We don't want to add unused code.
|
Tested in Chrome, Safari, Firefox and Edge on Windows 11. |
| document.getElementById('scroll-down').addEventListener('click', (e) => lenis.scrollTo("#info")); | ||
| }); | ||
| </script> | ||
| <script type="text/javascript">//<!-- |
There was a problem hiding this comment.
This whole thing is not needed anymore since we have you added smooth scroll to html and this code doesn't replicate the mousewheel smooth scroll anyway (which we wanted to remove). Instead we could change the arrow button to this:
<a href="#info">
<div class="floating-arrow">
<img alt="Scroll down arrow" src="./images/arrow.svg" id="scroll-down" style="cursor:pointer;" border="0" height="90" width="130" />
</div>
</a>Also, same thing about //<!--
| <link rel="preconnect" href="https://www.gstatic.com" /> | ||
| <link rel="preconnect" href="https://unpkg.com" /> | ||
|
|
||
| <script type="text/javascript">//<!-- |
There was a problem hiding this comment.
We really don't need //<!--, as far as I know its only for old browser and we don't care about supporting them. All modern browser should handle script tag correctly. Also, I don't think this whole script is unnecessary. I pretty much always use Firefox, which it doesn't use webkit, and it works perfectly. You have to give me a better example of why this would be needed.
There was a problem hiding this comment.
it's not only old browser, but XML parsers like Rest Assured testing frameworks, which bad trip if there is any <> inside the script or style tags.
2 participants
XHTML5 make the code XML parser compliant. Minor JavaScript fixes to avoid broken web page, put Lenis together, add truthy checks, add some fallback color CSS to avoid WebKit var()