Just discovered your excellent Modern CSS Solutions site via Kevin Powell and I'm going through your articles and I'm testing some of your solutions to possibly implement in my soon-to-be redone website... I'm testing in Codepen what you have done here re: the smooth scrolling and it is NOT working in Codepen using Brave or Firefox. I haven't tested stand-alone, but do you know if there are issues with Codepen not being up to date with things like smooth-scrolling? I thought it might have been the prefers-reduced-motion flag that wasn't recognized, but I put the smooth scroll command outside the media query with no difference. No difference also when I change the layout of the windows in Codepen. I'm using Win10.
Do you mean your own re-implementation isn't working, or my original demo isn't working? I'm not aware of an issue (it is still working for me) and caniuse shows support for Firefox but I'm not familiar with Brave: caniuse.com/css-scroll-behavior
Thank you for replying Stephanie!
It's in the Codepen original demo. I've tried in Firefox, Chrome and Brave (faster chromium based browser) and I don't see a difference (even when commenting out the property). Ditto on the MDN site. It's not clear to me what this smooth scrolling action should look like, all I see is BOOM, right back to the top. User agents can ignore the property, but I checked the settings of each browser and smooth scrolling is enabled (in my Win10 settings as well) ... unless it's an add-on/extension that is the culprit (I haven't gone to that extent in my testing though).
I know it's not a big deal, but it does raise a couple of questions: a) how can I properly test something if I can't even see it locally despite the property being implemented in most browsers? and b) can I trust tools such as Codepen and the like to give me an unbiased result? I mean...smooth scrolling isn't going to break a site, but...what else WILL, if I am given the impression things are hunky dory (or not) and I implement a site following what I'm being "told" is functional? You know what I mean? I'm a toddler with web dev so maybe I'm barking up the wrong tree, but I was a programmer in a former life. Oh and I also noticed the Top button is displaying sort of, well, weird (I include a screenshot to show you). Best regards!
I've just been able to test on Win10 and it's working (testing my CodePen demo, no changes) so I'm sorry but I'm not sure what to suggest!
I probably shouldn't have used an emoji - the Mac version of the "top" emoji is more minimal but I see the Win is blocky :) I will add a note to update it to perhaps an SVG for more consistent results, thanks for the callout!
CodePen shouldn't be explicitly getting in the way of rendering. The only time I've occasionally run into issues is if I keep the "Normalize" CSS reset which is a bit heavy handed for modern browsers. I just removed it from the Pen juuuuust in case it makes a difference! If not, I'm sorry but I'm not sure what else other than something unique to your system. Good luck with your web dev journey!
Ok, thanks!
I retested on the MDN site after pressing Submit and it WAS working (I must have not tested correctly), but still NOT working on the Codepen (which I reloaded).
Oh, wait....(breaking news sound effect)...I just found (via MDN's super documentation) a setting in my Win10 setup re: showing animations...and it was turned OFF! Activating it made the smooth scroll work on your Codepen! Hhaaa!
Well...isn't that interesting and educational! LOOL! (mumbles something inaudible about Windows...)
Sorry to have bothered you with this...I had a feeling it was something higher up in the programming food chain!
Now I can continue going through your interesting articles on your site! :-) ^_^
Just discovered your excellent Modern CSS Solutions site via Kevin Powell and I'm going through your articles and I'm testing some of your solutions to possibly implement in my soon-to-be redone website... I'm testing in Codepen what you have done here re: the smooth scrolling and it is NOT working in Codepen using Brave or Firefox. I haven't tested stand-alone, but do you know if there are issues with Codepen not being up to date with things like smooth-scrolling? I thought it might have been the prefers-reduced-motion flag that wasn't recognized, but I put the smooth scroll command outside the media query with no difference. No difference also when I change the layout of the windows in Codepen. I'm using Win10.
Do you mean your own re-implementation isn't working, or my original demo isn't working? I'm not aware of an issue (it is still working for me) and caniuse shows support for Firefox but I'm not familiar with Brave: caniuse.com/css-scroll-behavior
Thank you for replying Stephanie!
It's in the Codepen original demo. I've tried in Firefox, Chrome and Brave (faster chromium based browser) and I don't see a difference (even when commenting out the property). Ditto on the MDN site. It's not clear to me what this smooth scrolling action should look like, all I see is BOOM, right back to the top. User agents can ignore the property, but I checked the settings of each browser and smooth scrolling is enabled (in my Win10 settings as well) ... unless it's an add-on/extension that is the culprit (I haven't gone to that extent in my testing though).
I know it's not a big deal, but it does raise a couple of questions: a) how can I properly test something if I can't even see it locally despite the property being implemented in most browsers? and b) can I trust tools such as Codepen and the like to give me an unbiased result? I mean...smooth scrolling isn't going to break a site, but...what else WILL, if I am given the impression things are hunky dory (or not) and I implement a site following what I'm being "told" is functional? You know what I mean? I'm a toddler with web dev so maybe I'm barking up the wrong tree, but I was a programmer in a former life. Oh and I also noticed the Top button is displaying sort of, well, weird (I include a screenshot to show you). Best regards!
I've just been able to test on Win10 and it's working (testing my CodePen demo, no changes) so I'm sorry but I'm not sure what to suggest!
I probably shouldn't have used an emoji - the Mac version of the "top" emoji is more minimal but I see the Win is blocky :) I will add a note to update it to perhaps an SVG for more consistent results, thanks for the callout!
CodePen shouldn't be explicitly getting in the way of rendering. The only time I've occasionally run into issues is if I keep the "Normalize" CSS reset which is a bit heavy handed for modern browsers. I just removed it from the Pen juuuuust in case it makes a difference! If not, I'm sorry but I'm not sure what else other than something unique to your system. Good luck with your web dev journey!
Ok, thanks!
I retested on the MDN site after pressing Submit and it WAS working (I must have not tested correctly), but still NOT working on the Codepen (which I reloaded).
Oh, wait....(breaking news sound effect)...I just found (via MDN's super documentation) a setting in my Win10 setup re: showing animations...and it was turned OFF! Activating it made the smooth scroll work on your Codepen! Hhaaa!
Well...isn't that interesting and educational! LOOL! (mumbles something inaudible about Windows...)
Sorry to have bothered you with this...I had a feeling it was something higher up in the programming food chain!
Now I can continue going through your interesting articles on your site! :-) ^_^
Glad you got it worked out!